作用
-
延迟回调执行
在 Vue 中，数据变化触发的 DOM 更新是异步的（例如修改data后视图不会立即更新）。this.$nextTick()会将回调函数推迟到 DOM 更新完成后执行， 确保在回调中操作的是最新的 DOM。 -
典型使用场景
- 数据修改后立即获取更新后的 DOM 属性（如元素尺寸、滚动位置）。
- 在
created生命周期中操作 DOM（此时 DOM 尚未渲染）。 - 确保子组件渲染完成后再执行父组件的逻辑。
实现原理
Vue 依赖 JavaScript 的事件循环，结合微任务和宏任务 实现 nextTick，核心逻辑如下：
1. 异步队列与合并更新
- 当数据变化时，Vue 不会立即更新 DOM，而是将需要更新的 Watcher 推入一个队列（
queueWatcher）。 - 在同一个事件循环中，多次数据变化会被合并，避免重复的 DOM 操作。
2. 优先级选择异步策略
Vue根据环境选择不同的异步方法（优先级由高到低）：
- Vue 2.x：
Promise.then（现代浏览器） →MutationObserver（监听 DOM 变化） →setImmediate（IE/Node.js） →setTimeout（降级方案）。 - Vue 3.x：
queueMicrotask（微任务，优先级更高）。
关键点
- 微任务优先：优先使用
Promise.then，确保回调在 UI 渲染前执行（更早）。 - 降级策略：兼容不支持微任务的环境（如旧版 IE）。
- 合并回调：同一事件循环中的多次
nextTick调用会被合并，减少性能消耗。
