vue nexttick实现
Vue 中 nextTick 的实现原理
nextTick 是 Vue 提供的一个异步 API，用于在 DOM 更新完成后执行回调函数。其核心实现依赖于 JavaScript 的事件循环机制。
实现机制
Vue 内部维护一个回调队列，当调用 nextTick 时，会将回调函数推入队列中。Vue 会尝试使用微任务或宏任务来异步执行这些回调，确保它们在当前 DOM 更新周期之后执行。
常见的异步执行方式包括：
Promise.then（微任务）MutationObserver（微任务）setImmediate（宏任务，仅 IE 和 Node.js 支持）setTimeout（宏任务，降级方案）
源码核心逻辑
Vue 的 nextTick 实现会根据当前环境选择最优的异步调度方式。以下是简化后的逻辑：
let callbacks = [];
let pending = false;
function flushCallbacks() {
pending = false;
const copies = callbacks.slice(0);
callbacks.length = 0;
for (let i = 0; i < copies.length; i++) {
copies[i]();
}
}
function nextTick(cb, ctx) {
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx);
} catch (e) {
handleError(e, ctx, 'nextTick');
}
}
});
if (!pending) {
pending = true;
if (typeof Promise !== 'undefined') {
Promise.resolve().then(flushCallbacks);
} else if (typeof MutationObserver !== 'undefined') {
const observer = new MutationObserver(flushCallbacks);
const textNode = document.createTextNode(String(counter));
observer.observe(textNode, { characterData: true });
textNode.data = String(++counter);
} else if (typeof setImmediate !== 'undefined') {
setImmediate(flushCallbacks);
} else {
setTimeout(flushCallbacks, 0);
}
}
}使用场景
nextTick 常用于以下场景：
- 在数据变化后获取更新后的 DOM
- 在组件渲染完成后执行某些操作
- 避免频繁操作 DOM 导致的性能问题
示例代码：
this.message = 'updated';
this.$nextTick(() => {
console.log('DOM updated:', this.$el.textContent);
});注意事项
nextTick返回一个 Promise，可以结合async/await使用- 多次调用
nextTick时，回调会按调用顺序执行 - 在 SSR 环境下，
nextTick会立即执行回调
