关于vue中的nextTick深入理解
2017-11-06 00:00
274 查看
一、定义[nextTick、事件循环]
nextTick的由来:由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。
nextTick的触发时机:
在同一事件循环中的数据变化后,DOM完成更新,立即执行nextTick(callback)内的回调。
应用场景:
需要在视图更新之后,基于新的视图进行操作。
以上出现了事件循环的概念,其涉及到JS的运行机制,包括主线程的执行栈、异步队列、异步API、事件循环的协作,此处不展开之后再总结。大致理解:主线程完成同步环境执行,查询任务队列,提取队首的任务,放入主线程中执行;执行完毕,再重复该操作,该过程称为事件循环。而主线程的每次读取任务队列操作,是一个事件循环的开始。异步callback不可能处在同一事件循环中。
简单总结事件循环:
同步代码执行 -> 查找异步队列,推入执行栈,执行callback1[事件循环1] ->查找异步队列,推入执行栈,执行callback2[事件循环2]...
即每个异步callback,最终都会形成自己独立的一个事件循环。
结合nextTick的由来,可以推出每个事件循环中,nextTick触发的时机:
同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback触发
tips:本文的任务队列、消息队列、异步队列指同一个东西,均指macrotask queue。
事件循环详解:http://www.cnblogs.com/hity-tt/p/6733062.html
上面这些内容纯属是从网上搬运过来的,接下来说说在项目中遇到的问题
还是用文字啰嗦点说吧!代码实在不好展示我想表现的,因为我认为这种问题会在其他地方还会有类似问题;
项目中用到了bootstrap-select.js插件(带搜索功能的下拉框),类似这样的插件在vue渲染完数据后肯定需要初始化,大概如下
mounted: function () { $('#select').selectpicker(); }
我的业务需求是上面还有一个下拉框需要先选择上面的,来决定下面显示哪个模块,这时问题就来了,数据发生改变了,我的下拉框就变成如下图
然后我很机智呀!果断去watch里面再初始化一下插件呀!但是发现无效,这下彻底懵逼了,后面经过各种打印,各种百度发现了这个东东
watch:{ type: function (val, oldVal) { if(val==2){ Vue.nextTick(function () { //或者用 this.$nextTick $('#select').selectpicker(); }) } } }
最近,在项目中要使用Swiper做一个移动端轮播插件。需要先异步动态加载数据后,然后使用v-for渲染节点,再执行插件的滑动轮播行为。解决这个问题,我们通过在组件中使用vm.$nextTick来解决这一需求。
一
3ff0
、vm.$nextTick( [callback] )
二、Vue.nextTick( [callback, context] )
三、异步更新队列
实例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <ul id= "demo" > <li v- for = "item in list" >{{item}}</div> </ul> new Vue({ el: '#demo' , data:{ list=[0,1,2,3,4,5,6,7,8,9,10] }, methods:{ push: function (){ this .list.push(11); this .nextTick( function (){ alert( '数据已经更新' ) }); this .$nextTick( function (){ alert( 'v-for渲染已经完成' ) }) } }}) |
1 2 3 4 5 6 7 8 9 10 11 | this .$http.post(apiUrl) .then((response) => { if (response.data.success) { this .topFocus.data = response.data.data; this .$nextTick( function (){ //渲染完毕 }); } }). catch ( function (response) { console.log(response); }); |
总结:
* `Vue.nextTick(callback)`,当数据发生变化,更新后执行回调。
* `Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。
相关文章推荐
- spring的关于数据源的datasource接口的深入理解
- 深入理解Vue父子组件生命周期执行顺序及钩子函数
- 深入理解vue.js双向绑定的实现原理
- 深入理解Vue 的钩子函数
- 深入理解SpringBoot中关于Mybatis使用方法
- 关于学习Linux的经典书籍 (深入理解Linux内核、Linux设备驱动程序等) .
- 关于学习Linux的经典书籍 (深入理解Linux内核、Linux设备驱动程序等) .
- 简单理解Vue中的nextTick
- 深入理解 Android 卷I - 关于
- GPU(CUDA)学习日记(十一)------ 深入理解CUDA线程层次以及关于设置线程数的思考
- c语言的菜鸟理解到深入学习1--关于printf的小细节printf(s,i);竟然是对的
- 深入理解Java原始数据类型和包装类关于==和equals的比较
- 关于vue.js中this.$emit的理解
- 深入理解基于vue-cli的vuex配置
- 深入理解vue
- 深入理解Vue 的条件渲染和列表渲染
- 关于C++的深入理解
- 深入理解7816(1)---- 关于F/D和etu
- Extjs深入理解(一) 关于xtype 与 new
- 关于vue.js过渡css类名的理解(推荐)