vue nextTick得用法

vue nextTick得用法

官网介绍：

​​Vue.nextTick( [callback, context] )​​

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

（是不是不懂官网在说啥，写个例子看看）

View Code

结果

= 》

结果：msg1和msg3显示的内容是旧内容，而msg,msg2显示的内容是新内容。

由于 获取dom元素得内容 在data更新之前发生 所以导致了获取到没修改得旧内容

Vue中DOM更新是异步的

nextTick使用场景：

1.vue生命周期：created()中，由于此处dom得挂载还没完成，渲染也没有完成，data观测完成，想要获取dom的内容 或者操作dom 需要用nextTick

2.在数据改变之后，需要执行某些dom的结构，内容上的操作的时候，用nextTick可以确保活取到数据改变以后的dom，数据

Vue中DOM异步更新和nextTick的关系：

Vue异步执行DOM更新过程：数据变化，Vue将开启一个队列，将所有数据的变化都存储起来，到一定时间后，再统一更新。如果同一数据多次变化，呗watcher多次检测到，只会存储一次，最后那次的变化，在下一次更新渲染dom的事件循环“tick”中，执行操作。

异步执行操作：基于原生Promise.then和MessageChannel，若环境不支持（IE）则采用setTimeout来延迟执行。

参考博客地址 ​​https://jianshu.com/p/a7550c0e164f​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。