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 相关文章推荐
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
微信小程序中为什么使用var that=this
Aug 27 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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
Js中sort()方法的用法
2006/11/04 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
Python with的用法
2014/08/22 Python
Python编程之属性和方法实例详解
2015/05/19 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
python实现备份目录的方法
2015/08/03 Python
python的文件操作方法汇总
2017/11/10 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
七年级历史教学反思
2014/02/05 职场文书
优秀教师演讲稿
2014/05/06 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
法定代表人身份证明书
2015/06/18 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书