前端Wiki/词条/nextTick

nextTick

定义把回调推迟到下一次 DOM 更新循环结束之后执行，保证拿到更新后的 DOM

Vue 更新 DOM 是异步的：修改响应式数据后，Vue 会把渲染工作合并到微任务队列，而不是立刻操作 DOM。所以紧跟在数据修改之后的同步代码去读 DOM，拿到的还是旧值。nextTick 把回调推迟到这一轮更新刷入 DOM 之后，因此能稳定读到更新后的节点。

最典型的用途是与第三方库对接：数据驱动列表变化后，要等 DOM 更新完成才能调用插件做初始化或测量高度。它返回 Promise，可以直接 await。理解它本质上就是理解 Vue 的渲染节奏——先改数据，再等微任务里的一帧，最后 DOM 才是新的。

数据修改后读 DOM 必须包在 nextTick 里，否则读到旧值
返回 Promise，可以用 await 风格写等待逻辑
本质是等微任务里的异步渲染刷盘，而不是等浏览器帧

JavaScript

import { ref, nextTick } from 'vue';
const list = ref(['a']);

async function addItem() {
  list.value.push('b');
  console.log('同步读 DOM：列表还是旧的');
  await nextTick();
  console.log('现在 DOM 已更新，可以测量高度或初始化插件');
}

⚠ 常见误区

数据改完立刻用 scrollHeight 等测量接口，拿到旧值
在 nextTick 里再做一次数据修改，触发额外的渲染周期
把它当成 setTimeout 的等价物，忽略它是微任务的事实

🔗 相关词条响应式与虚拟 DOM 侦听器 watch