$nextTick 的作用

文档：深入响应式原理

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

 

例子：

初始化数据：

定义方法：

页面效果：

然后我们现在试着点击触发修改：

 

 可以看到，msg已经变成了Hello world，在changeMsg()方法中，先修改msg的值成为‘Hello world’，然后通过拿到dom的值再依次修改msg1、msg2、msg3的值，此时修改得到的msg1依然是‘hello vue’，this.$nextTick中修改得到的msg2则是‘hello world’，msg3依然是‘hello vue’，也就是说，在changeMsg()方法触发后，修改了msg的值，但是此时再通过dom取到的值还未改变，所以可以知道：

 

 vue响应式的改变一个值以后，此时的dom并不会立即更新，如果需要在数据改变以后立即通过dom做一些操作，可以使用$nextTick获得更新后的dom。

 

希望本文对你有所帮助！