Vue.$nextTick的原理是什么

这篇文章主要介绍了Vue.$nextTick的原理是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue.$nextTick的原理是什么文章都会有所收获，下面我们一起来看看吧。

Vue中DOM更新机制

当你气势汹汹地使用Vue大展宏图的时候，突然发现，咦，我明明对这个数据进行更改了，但是当我获取它的时候怎么是上一次的值（本人比较懒，就不具体举例了?）

此时，Vue就会说：“小样，这你就不懂了吧，我的DOM是异步更新的呀！！！”

简单的说，Vue的响应式并不是只数据发生变化之后，DOM就立刻发生变化，而是按照一定的策略进行DOM的更新。这样的好处是可以避免一些对DOM不必要的操作，提高渲染性能。

在Vue官方文档中是这样说明的：

可能你还没有注意到，Vue异步执行DOM更新。只要观察到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作上非常重要。然后，在下一个的事件循环“tick”中，Vue刷新队列并执行实际 (已去重的) 工作。

白话一点就是说，其实这是和JS当中的事件循环是息息相关的，就是Vue不可能对每一个数据变化都做一次渲染，它会把这些变化先放在一个异步的队列当中，同时它还会对这个队列里面的操作进行去重，比如你修改了这个数据三次，它只会保留最后一次。这些变化是都可以通过队列的形式保存起来，那现在的问题就来到了，那vue是在事件循环的哪个时机来对DOM进行修改呢？

Vue有两种选择，一个是在本次事件循环的最后进行一次DOM更新，另一种是把DOM更新放在下一轮的事件循环当中。z这时，尤雨溪拍了拍胸脯说：“这两种方法，我都有!” 但是因为本轮事件循环最后执行会比放在下一轮事件循环要快很多，所以Vue优先选择第一种，只有当环境不支持的时候才触发第二种机制。（??开头的链接让你懂事件循环）

虽然性能上提高了很多，但这个时候问题就出现了，我们都知道在一轮事件循环中，同步执行栈中代码执行完成之后，才会执行异步队列当中的内容，那我们获取DOM的操作是一个同步的呀！！那岂不是虽然我已经把数据改掉了，但是它的更新异步的，而我在获取的时候，它还没有来得及改，所以会出现文章开头的那个问题。

这。。。我确实需要进行这样操作，那这么办呢？？

没关系啦，尤大很贴心的为我们提供了

Vue.$nextTick()

Vue.$nextTick()

其实一句话就可以把

$nextTick

这个东西讲明白：就是你放在

$nextTick

当中的操作不会立即执行，而是等数据更新、DOM更新完成之后再执行，这样我们拿到的肯定就是最新的了。

再准确一点来讲就是

$nextTick

方法将回调延迟到下次DOM更新循环之后执行。（看不懂这句人话的，可以看上面[狗头]）

意思我们都懂了，那

$nextTick

是怎样完成这个神奇的功能的呢？ 核心如下：

Vue

在内部对异步队列尝试使用原生的

Promise.then

、

MutationObserver

和

setImmediate

，如果执行环境不支持，则会采用

setTimeout(fn, 0)

代替。

仔细地看这句话，你就可以发现这不就是利用 JavaScript 的这些异步回调任务队列，来实现 Vue 框架中自己的异步回调队列。这其实就是一个典型的将底层 JavaScript 执行原理应用到具体案例中的示例。

我在这里稍微总结一下：就是

$nextTick

将回调函数放到微任务或者宏任务当中以延迟它地执行顺序；（总结的也比较懒?）

重要的是理解源码中它的三个参数的意思：

• callback：我们要执行的操作，可以放在这个函数当中，我们没执行一次

  $nextTick

  就会把回调函数放到一个异步队列当中；

• pending：标识，用以判断在某个事件循环中是否为第一次加入，第一次加入的时候才触发异步执行的队列挂载

• timerFunc：用来触发执行回调函数，也就是

  Promise.then

  或

  MutationObserver

  或

  setImmediate

  或

  setTimeout

  的过程

理解之后，在看整个

$nextTick

里面的执行过程，其实就是把一个个

$nextTick

中的回调函数压入到callback队列当中，然后根据事件的性质等待执行，轮到它执行的时候，就执行一下，然后去掉callback队列中相应的事件。

使用

说了这么多，怎么用它呢？ 很简单很简单

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

使用场景

• created中获取DOM的操作需要使用它

• 就是我们上面的例子，你如果想要获取最新值，就用它

• 还有一些第三方插件使用过程中，使用到的情况，具体问题具体分析

补充

之前我一直搞不懂一个的问题，

$nextTick

既然把它传入的方法变成微任务了，那它和其它微任务的执行顺序是怎样的呢？

这简单来说就是谁先挂载

Promise

对象的问题，在调用

$nextTick

方法时就会将其闭包内部维护的执行队列挂载到

Promise

对象，在数据更新时

Vue

内部首先就会执行

$nextTick

方法，之后便将执行队列挂载到了

Promise

对象上，其实在明白

Js

的

Event Loop

模型后，将数据更新也看做一个

$nextTick

方法的调用，并且明白

$nextTick

方法会一次性执行所有推入的回调，就可以明白执行顺序的问题了

还有

$nextTick

和

nextTick

区别就是

nextTick

多了一个context参数，用来指定上下文。但两个的本质是一样的，

$nextTick

是实例方法，

nextTick

是类的静态方法而已；实例方法的一个好处就是，自动给你绑定为调用实例的

this

罢了。