Vue-$nextTick()作用

  |  
 阅读次数

Vue中$nextTick()作用

官方文档解释如下:

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码.

什么时候需要用的Vue.nextTick() ?

在Vue生命周期 created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。

原因是 created()钩子函数执行时, DOM 并未进行任何渲染,此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中

与之对应的就是mounted()钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。

使用时机:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子函数,此时页面并未全部渲染。

在某个动作有可能改变DOM元素结构的时候,对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中.