vue3中的 $nextTick

Vue3 中 $nextTick 的用法和工作原理
在 Vue3 中，$nextTick 是一个非常有用的方法，用于等待 DOM 更新完成后再执行指定的回调函数。当数据发生变化并触发视图更新时，Vue 并不会立即同步渲染这些更改到 DOM 上，而是将它们缓存起来，在下一次事件循环中统一处理。
通过使用 $nextTick 方法可以确保在获取 DOM 节点或操作 DOM 之前，所有的更新都已经应用完毕[^1]。
基本语法
this.$nextTick(() => {
// 执行一些依赖于新DOM的操作
});
登录后复制
使用场景举例
假设有一个按钮点击事件会改变某个状态变量 isVisible 来控制组件显示隐藏：
<template>
<div v-if="isVisible">
<p>This paragraph will be shown when isVisible becomes true.</p>
</div>
<button @click="toggleVisibility">Toggle Visibility</button>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(false);

function toggleVisibility() {
isVisible.value = !isVisible.value;

this.$nextTick(() => {
console.log('Now the DOM has been updated');
// 可以在这里安全地访问最新的DOM结构
});
}
</script>
登录后复制
在这个例子中，当点击按钮切换可见性之后，$nextTick 确保了只有在新的 DOM 结构被浏览器绘制出来以后才会打印日志信息以及允许进一步基于最新 DOM 进行其他逻辑处理。