vue中的$nextTick()

Posted xiexing

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中的$nextTick()相关的知识,希望对你有一定的参考价值。

vue中$nextTick()作用

1、vue更新数据是异步的

1.0中确实是通过v-el:xxx标记dom然后在组件里通过this.$els.xxx就可以获得这个dom对象了,$nextTick(() => {})与dom相关操作写在该函数回调中,确保DOM已渲染。

2、什么是Vue.nextTick()

在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的js代码。

3、什么时候需要用到Vue.nextTick()

你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()回调函数中。原因是,在created()钩子函数执行的时候DOM其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mouted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。使用时机: el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子函数,此时页面并未全部渲染。
在某个动作有可能改变DOM元素结构的时候,对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中。

以上是关于vue中的$nextTick()的主要内容,如果未能解决你的问题,请参考以下文章

vue中的$nextTick()

vue中的this.$nextTick().then()

从Vue.nextTick探究事件循环中的线程协作机制

vue中$nextTick()

vue中nextTick的理解

Vue中的nextTick