vue——nextTick函数

一.nextTick的作用

Vue.nextTick作用是在下一次 DOM 更新结束后执行其指定的回调。。

　　那么我们的理解是：当数据发生变化之后，DOM视图并不会立即更新，如果我们在发生变化之后立马去获取某个节点或者某个节点的值，很有可能结果就是undefined；因为Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新；

语法：this.$nextTick(回调函数）

二.案例：

 1.没有使用nextTick：

 

通过代码可知没有在this.$nextTick方法中进行DOM操作，this.$refs.message.innerHTML的值还是初始值

2.使用nextTick:

 

 

使用this.$nextTick值发生了改变，在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM

三.应用场景

在vue的生命周期钩子函数created()中进行DOM操作的时候一定要把DOM操作放入到this.$nextTick()中；

　　 因为在created钩子函数触发的时候，DOM是没有进行渲染的；DOM没有进行渲染，然后进行DOM操作无疑是徒劳的；

　　 所以我们在created中进行DOM操作的时候，一定要将DOM操作放入到this.$nextTick()中；、

在mounted中，因为当触发mounted的时候，DOM的挂载和渲染都已经完成了，所以在mounted中进行DOM操作是不会有任何问题的；