简单易懂 关于nextTick()的理解

前言

学习Vue的过程中，大家肯定都使用过nextTick()，关于nextTick()的使用时机，大家肯定都知道，那么它的工作原理是怎样的呢，本文就简单说一下它的nextTick()的工作原理。

nextTick的使用时机

首先记住：nextTick所指定的回调会在浏览器更新DOM完毕之后再执行。

举个例子：

在我自己做的一个单页面应用中，我有一个需求，当从后端请求回数据后，马上就对页面进行更新。比如，我要点击 *** 作里的删除 *** 作，前端删除数据后就向后端发请求，后端删除数据后返回数据，如果我们想马上显示到页面上，应该怎么做呢？

可能好多人会像我第一次做那样，比如我这个页面是用 v-for 遍历data这个数据显示出来的，可能好多人就会直接把前端返回的数据直接重新赋值给data。但是这样是绝对不行的！这样只会导致数据其实是变了，但是视图是不会变的，因为vue更新dom是异步的，无法通过同步代码赋值后马上去更新页面。所以即使删除成功了页面也不会显示出来。即使显示删除成功，页面也不会更新。

如何更新

我们的需求是，请求回数据后马上更新页面，首先理解几个点。

1、vue更新Dom是异步更新。

如图官网的描述，解释一下这段话，直接看可能有些懵，前两句话，关于同步和异步，以及提到的"事件循环"，这就要从JS的运行机制说起，戳这里前往。第三句话，“如果同一个 watcher 被多次触发，只会被推入到队列中一次”，这是什么意思呢，也在我的文章中可找到，戳我前往。

2、理解执行时机

读完上面两篇文章，大家应该就知道宏任务和微任务了把，而nextTick内部就是调用宏任务和微任务来完成事件调用的机制，让nextTick里的回调在一个事件循环的最后执行。为什么要在最后呢？在最后即意味着在所有异步任务之后，记得上一点吗，“vue更新Dom是异步更新”，而我们又把nextTick里的回调放在了所有异步任务的最后，这样就解释了最开始那句话，nextTick所指定的回调会在浏览器更新DOM完毕之后再执行。

3、回到例子实现需求

我们想要实现需求，本例我们采用热更新，即只更新局部组件。

我直接把我的子组件全放在router-view里的，通过变化v-if来实现组件更新。

看到这里可能有人会问，这不就是先把v-if设为false，再设置为true来实现吗，要不要nextTick都一样，那么这样想就大错特错了。

还记得刚才说的“如果同一个 watcher 被多次触发，只会被推入到队列中一次”，那篇文章已经解释过了，vue会把所有代码都执行了再去渲染页面，所以我们这两条this.$isRouterAlive = false 和 this.$isRouterAlive = true，相当于只执行了最后一条等于true，false都没执行过，所以相当于还是什么都没做，原始是true，现在还是true。

加了个nextTick就不一样了，这段代码就相当于告诉vue，vue你先帮我执行 this.$isRouterAlive = false，先不要管我nextTick里的东西，你去渲染完了最后再来执行我nextTick里的代码。

这样一说大家是不是就比较明白了，this.$isRouterAlive = true 是在页面渲染过后 再执行的，所以我们肉眼看其实已删除货物，页面马上就更新了，其实其中经过了先把router-view里的子组件取消掉，即v-if = false，然后再让 v-if = true，那么v-if大家都知道就是创建，相当于router-view里的内容被重新创建了，所以此时的数据也是最新的。