vue中的$nextTick()

Posted 2020-10-16 xiexing

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