nexttick 用于在 vue 数据更新后 dom 完成渲染时执行操作；因 vue 异步批量更新 dom，直接读取可能获取旧状态，nexttick 确保回调在本次更新周期结束后执行，支持回调函数和 async/await 两种用法。
Vue 在数据变化后不会立即更新 DOM，而是异步批量更新。如果你需要在 DOM 更新完成后执行某些操作（比如获取元素尺寸、聚焦输入框、滚动到某位置），nextTick 就是专门为此设计的 API。
为什么必须用 nextTick？
Vue 的响应式更新是异步的：当你修改响应式数据，视图不会立刻重绘，而是被推入一个微任务队列，等当前同步代码执行完再统一处理。如果直接在赋值后读取 DOM，拿到的仍是旧状态。
- 例如：
this.show = true; console.log(this.$refs.box.offsetHeight)—— 此时box可能还没渲染出来，高度为 0 -
nextTick确保回调在本次 DOM 更新周期完成之后执行，此时节点已真实挂载或更新完毕
基本用法：回调函数形式
传入一个函数，它会在 DOM 更新后被调用：
this.message = 'Hello';
this.$nextTick(() => {
// 这里可以安全操作更新后的 DOM
this.$refs.input.focus();
});
注意：该方法在 Vue 2 和 Vue 3 的 Options API 中写法一致；Composition API 中需从 vue 显式导入：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章