vue中$nextTick()做用

 

 

vue更新数据是异步的

1.0 中确实是经过 v-el:xxx 标记 dom 而后在组件里经过 this.$els.xxx 就能够得到这个 dom 对象了

$nextTick(() => {}) 与DOM相关操做写在该函数回调中，确保DOM已渲染

 

什么是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()的回调函数中

 

转载于:https://blog.csdn.net/shuidinaozhongyan/article/details/72630573