1. 為什么需要 nextTick

Vue 采用 異步渲染機制，當響應式數據發生變化時，Vue 并不會立即更新 DOM，而是將這些變化放入一個 隊列 中，并在 同一事件循環（Event Loop）中合并相同的修改，最后執行批量更新。這樣做的目的是 提升性能，避免不必要的重復渲染。

例如：

<template><div>{{ msg }}</div>
</template><script>
export default {data() {return {msg: "Hello"};},mounted() {this.msg = "Vue";console.log(document.querySelector("div").innerText); // 仍然是 "Hello"this.$nextTick(() => {console.log(document.querySelector("div").innerText); // 現在是 "Vue"});}
};
</script>

為什么 console.log 還是 "Hello"？
因為 Vue 在 this.msg = "Vue" 時 不會立即更新 DOM，而是等本輪事件循環結束后再更新。因此，我們需要 nextTick 來確保獲取到更新后的 DOM。

---

2. nextTick 的原理

Vue 的 nextTick 本質上是一個 異步任務調度器，它會在當前 DOM 任務完成后執行回調。其內部原理主要依賴 微任務（Microtask）和 宏任務（Macrotask）。

2.1 任務隊列

Vue 內部維護了一個 回調隊列（callback queue），當 nextTick 被調用時，它會將回調函數 推入隊列，然后等待 Vue 進行 DOM 更新后，再依次執行這些回調。

2.2 任務調度策略

nextTick 采用 優雅降級 的策略，在不同環境下選擇最佳的異步方法：

1. Promise（Microtask）（首選，現代瀏覽器支持）
2. MutationObserver（Microtask）（比 setTimeout 更快）
3. setImmediate（Macrotask）（僅 IE 支持）
4. setTimeout（Macrotask）（最后的兜底方案）

代碼實現：

function nextTick(callback) {const p = Promise.resolve();p.then(callback);
}

在 Vue 3 中：

let callbacks = [];
let pending = false;function flushCallbacks() {pending = false;const copies = callbacks.slice(0);callbacks.length = 0;for (let cb of copies) {cb();}
}export function nextTick(cb) {callbacks.push(cb);if (!pending) {pending = true;Promise.resolve().then(flushCallbacks);}
}

流程解析：

1. 每次調用 nextTick(cb)，將 cb 放入 callbacks 隊列中。
2. 只要 pending === false，就啟動 微任務（Promise.then）。
3. 微任務執行 flushCallbacks，依次調用 callbacks 隊列中的所有回調。

---

3. nextTick 在 Vue 2 和 Vue 3 的區別

3.1 Vue 2 的 nextTick

在 Vue 2 中，nextTick 主要依賴：

• Microtask（Promise.then, MutationObserver）
• Macrotask（setImmediate, setTimeout）
• 維護了一個 異步任務隊列，用于批量執行 nextTick 回調。

3.2 Vue 3 的 nextTick

Vue 3 主要優化：

• 只使用 Promise 作為微任務（不再使用 MutationObserver）。
• 更高效的 異步隊列處理機制。

Vue 3 中的 nextTick：

const resolvedPromise = Promise.resolve();
export function nextTick(fn) {return fn ? resolvedPromise.then(fn) : resolvedPromise;
}

優化點

• 直接使用 Promise.resolve().then(fn)，避免了 Vue 2 復雜的回調隊列管理。
• 如果不傳入 fn，則返回一個 Promise，支持 await this.$nextTick()。

---

4. nextTick 的使用場景

4.1 在 DOM 更新后執行操作

<template><div ref="box">{{ message }}</div>
</template><script>
export default {data() {return { message: "Hello" };},methods: {updateMessage() {this.message = "Vue";this.$nextTick(() => {console.log(this.$refs.box.innerText); // "Vue"});}}
};
</script>

4.2 在 watch 中等待 DOM 更新

watch(() => state.count, async (newVal) => {await nextTick();console.log(document.querySelector("#counter").innerText); // 確保 DOM 已更新
});

4.3 在 Vue 3 setup 中使用

import { nextTick, ref } from "vue";setup() {const message = ref("Hello");const updateMessage = async () => {message.value = "Vue";await nextTick();console.log(document.querySelector("#msg").innerText);};return { message, updateMessage };
}

---

5. 總結

• nextTick 是 Vue 提供的一個 異步任務調度方法，用于在 DOM 更新后執行回調。
• Vue 采用 異步批量更新 機制，nextTick 可確保 數據變更后獲取到最新的 DOM。
• Vue 內部采用 Promise（Microtask）優先，降級到 MutationObserver / setTimeout 作為備用方案。
• Vue 3 進一步優化了 nextTick，減少了不必要的復雜度，提升了性能。

你可以簡單理解為：

Vue 在修改數據后，不會立即更新 DOM，而是 批量合并修改，并在下一次 事件循環（Event Loop）結束時更新 DOM。nextTick 讓你可以等到 DOM 更新完成后再執行操作。