Vue.nextTick() 基本使用
作用: 等待下一次 DOM 更新刷新的工具方法。
- 为什么需要用到Vue.nextTick()?
当你在 Vue 中更改响应式状态时,最终的 DOM 更新并不是同步生效的,而是由 Vue
将它们缓存在一个队列中,直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变,都仅执行一次更新。nextTick() 可以在状态改变后立即使用,以等待 DOM 更新完成。你可以传递一个回调函数作为参数,或者 await 返回的
Promise。 - Vue.nextTick() 和 this.$nextTick() 的区别
vue中this.$nextTick() 是绑定在实例上的 nextTick() 函数。和全局版本的 nextTick()
的唯一区别就是组件传递给 this.$nextTick() 的回调函数会带上 this 上下文,其绑定了当前组件实例。 - Vue.nextTick() 使用场景
获取数据更新后的dom元素,或者在数据更新后操作dom
- Vue.nextTick() 实现原理 点击查看
- 使用示例:
<script setup> import { ref, nextTick } from 'vue' const count = ref(0) async function increment() { count.value++ // DOM 还未更新 console.log(document.getElementById('counter').textContent) // 0 await nextTick() // DOM 此时已经更新 console.log(document.getElementById('counter').textContent) // 1 } </script> <template> <button id="counter" @click="increment">{{ count }}</button> </template>