一、简介

Vue 中的 nextTick() 方法用于把函数的执行时机，放在 DOM 更新完成之后。

在 Vue 中，数据更新是异步的，即使在数据变化之后立即访问 DOM，也不能保证取到最新的数据。这时就可以使用 nextTick() 方法来确保在 DOM 更新完成之后执行特定的操作，推迟操作到下一次 update ，以确保相应操作能准确执行。

二、例子

比如：页面上，我们使用 v-if 来控制组件的显示，在该组件加载完成之前，我们是无法立即给这个组件传值的。我们可能就需要 nextTick() 函数来确保，组件加载完成以后，再执行赋值或者操作子组件内的属性。

当点击按钮时，会触发 changeMessage() 方法，将 message 的值改为"Hello, Vue!"。在 nextTick() 的回调函数中，我们可以确保 DOM 已经更新完成，然后可以执行一些操作，例如获取更新后的 DOM 元素或执行其他的逻辑。在控制台中，输出的结果会按照以下顺序显示：

// message changed
// DOM updated
// do something after DOM updated

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24