VUE重点问题总结


Posted in Javascript onMarch 19, 2018

1、组件三种挂载方式

自动挂载

var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

手动挂载

// 可以实现延迟按需挂载
<div id="app"> {{name}} </div> 
<button onclick="test()">挂载</button> 
<script> 
 var obj= {name: '张三'} 
 var vm = new Vue({ 
 data: obj
 }) 
 function test() { 
 vm.$mount("#app"); 
 }
// Vue.extend()创建没有挂载的的子类,可以使用该子累创建多个实例
var app= Vue.extend({ 
 template: '<p>{{message}}</p>', 
 data: function () { 
 return { 
  message: 'message'
  } 
 } 
 }) 
 new app().$mount('#app') // 创建 app实例,并挂载到一个元素上

2、路由传递参数的方式

<p>
  <!-- query要用path来引入,params要用name来引入,故不能写为 :to="{path:'/login',params: {isLogin: true}} -->
  <!-- 跳转路由时用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: '/login', query: {isLogin : true}}); -->
  <!-- 接收参数时用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; -->
  <router-link :to="{name:'login',params: {isLogin: true}}">亲,请登录</router-link>
  <router-link :to="{name:'login',params: {isLogin: false}}">免费注册</router-link>
 </p>
 <!-- 路由出口, 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>

3、对render:h => h(App)的理解

render:h=>h(App)是ES6中的箭头函数写法,等价于render:function(h){return h(App);}.

1.箭头函数中的this是 指向 包裹this所在函数外面的对象上。

2.h是creatElement的别名,vue生态系统的通用管理

3.template:‘<app/>',components:{App}配合使用与单独使用render:h=>h(App)会达到同样的效果

前者识别<template>标签,后者直接解析template下的id为app的div(忽略template的存在)

new Vue({
 el: '#app', // 相当于 new Vue({}).$mount('#app');
 template: '<App/>', // 1、可以通过在 #app 内加入<app></app>替代 2、或者 通过 render: h => h(App) 渲染一个视图,然后提供给el挂载
 components: { // vue2中可以通过 render: h => h(App) 渲染一个视图,然后提供给el挂载
  App
 }
});

4、Vue.nextTick()的理解

与DOM相关操作写在该函数回调中,确保DOM已渲染

nextTick的由来:

由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。

nextTick的触发时机:

在同一事件循环中的数据变化后,DOM完成更新,立即执行nextTick(callback)内的回调。

应用场景:

需要在视图更新之后,基于新的视图进行操作。

在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。

在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。

简单总结事件循环:

同步代码执行 -> 查找异步队列,推入执行栈,执行callback1[事件循环1] ->查找异步队列,推入执行栈,执行callback2[事件循环2]...即每个异步callback,最终都会形成自己独立的一个事件循环。结合nextTick的由来,可以推出每个事件循环中,nextTick触发的时机:

Javascript 相关文章推荐
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 Javascript
p5.js入门教程之键盘交互
Mar 19 #Javascript
vue 实现的树形菜的实例代码
Mar 19 #Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 #Javascript
jQuery替换节点元素的操作方法
Mar 18 #jQuery
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 #Javascript
分析javascript原型及原型链
Mar 18 #Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 #jQuery
You might like
第八节--访问方式
2006/11/16 PHP
php之XML转数组函数的详解
2013/06/07 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
jquery each()源代码
2011/02/14 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
python控制台英汉汉英电子词典
2020/04/23 Python
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
python制作简单五子棋游戏
2019/06/18 Python
Django 路由层URLconf的实现
2019/12/30 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
中医临床专业自我鉴定范文
2014/01/15 职场文书
安全大检查实施方案
2014/02/22 职场文书
清扬洗发水广告词
2014/03/14 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
春节随笔
2015/08/15 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang