Vue.nextTick的原理和应用场景

Posted 2023-05-08

参考技术A

nextTick官方文档说明：

疑问：

在Vue的 文档 中，说明Vue是 异步 执行DOM更新的。关于异步的解析，可以查看阮一峰老师的 这篇文章 。截取关键部分如下：

下图就是主线程和任务队列的示意图：

简单来说，Vue在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
知乎 上的例子：

图解：

循环详解：
第一个tick（图例中第一个步骤，即\'本次更新循环\'）：
1、首先修改数据，这是同步任务。同一事件循环的所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及DOM 。
2、Vue开启一个异步队列，并缓冲在此事件循环中发生的所有数据改变。如果同一个watcher被多次触发，只会被推入到队列中一次。

第二个tick（图例中第二个步骤，即\'下次更新循环\'）：
同步任务执行完毕，开始执行异步watcher队列的任务，更新DOM 。Vue在内部尝试对异步队列使用原生的 Promise.then和MessageChannel方法，如果执行环境不支持，会采用setTimeout(fn, 0)代替。

第三个tick（图例中第三个步骤）：
此时就是文档所说的下次DOM更新循环结束之后。
此时通过Vue.nextTick获取到改变后的DOM 。通过setTimeout(fn, 0)也可以同样获取到。

简单总结事件循环：

总之，异步是单独的一个tick，不会和同步在一个tick 里发生，也是DOM不会马上改变的原因。

需要注意的是，在created和mounted阶段，如果需要操作渲染后的试图，也要使用nextTick方法。

官方文档说明：

其他应用场景如下三例：

修改为：

原文： https://segmentfault.com/a/1190000012861862

Vue $nextTick

<!--

应用场景：

点击一个按钮，由v-if让div显示，并且拿到div的内容的时候。

在div还没有被创建出来的时候，是拿不到内容的。

这里涉及到了Vue异步更新队列的概念

Vue观察数据变化的时候并不是直接更新DOM，而是开启一个队列,并

缓冲在同一事件循环中的发生的所有数据的改变，在缓冲时会去除重复数据，

从而避免不必要的计算和DOM操作;在下一个事件循环tick中，Vue刷新队列并执行

 

-->

用法：  

<button @click="getSome">显示隐藏div。</button>

<div v-if="show" ref="divContainer">平安喜乐，万事胜意。</div>

//用来知道什么时候DOM更新完成

this.$nextTick(() => {

let text = this.$refs.divContainer.innerHTML;

console.log(text);

});