nextTick() 等待 DOM 更新完成
最后更新：2026-10-22
nextTick() 等待 DOM 更新完成
nextTick() 返回 Promise，在下次 DOM 更新完成后 resolve：数据刚改完想读最新 DOM 时使用。
| 分组 | 全局 API |
|---|---|
| 类型 | API |
| 作用域 | 全局 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
await nextTick()
console.log(el.value.textContent) // 已是最新⚙️ 参数
| callback? | 可选回调（新代码建议 await） |
|---|
返回值：Promise（DOM 更新后 resolve）
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
点击后控制台确认 DOM 已是「新值」。💡 要点
ℹ️ 说明 Vue 的 DOM 更新是异步批处理的：改数据后立刻读 DOM 还是旧值，这就是它存在的理由。
💡 提示 同一次事件里的多处数据修改会被合并成一次更新，只需等一次 nextTick。
⚠️ 注意 能通过 watchPostEffect 表达的持续同步不要靠 nextTick 堆砌。
🏷️ 相关全局 API
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 为什么改完数据读 DOM 还是旧值？
A 更新被批处理到微任务里执行；等一次 nextTick 即可看到新 DOM。
Q 和 setTimeout 的区别？
A nextTick 在微任务时机、更早且精确；setTimeout 是宏任务，时机不可控。
Q 组合式 API 也用同一个吗？
A 是，nextTick 全局可用，不区分风格。
