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 相关文章推荐
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
小程序新版订阅消息模板消息
Dec 31 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
PHP 输出缓存详解
2009/06/20 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
jquery图片切换插件
2015/03/16 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
python爬虫实现中英翻译词典
2019/06/25 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
别名指示符是什么
2012/10/08 面试题
《挑山工》的教学反思
2014/02/16 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
介绍信格式
2015/01/30 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
element多个表单校验的实现
2021/05/27 Javascript
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技