vue使用this.$nextTick()函数

Posted 2023-04-21

参考技术A Vue.nextTick

Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

nextTick，则可以在回调中获取更新后的 DOM，API 文档中官方示例如下：

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

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