nextTick()?是 Vue 3 中的一個核心函數，它的作用是延遲執行某些操作，直到下一次 DOM 更新循環結束之后再執行。這個函數常用于在 Vue 更新 DOM 后立即獲取更新后的 DOM 狀態，或者在組件渲染完成后執行某些操作。

官方的解釋是，當你修改了響應式狀態時，DOM 會被自動更新。但是需要注意的是，DOM 更新不是同步的。Vue 會在“next tick”更新周期中緩沖所有狀態的修改，以確保不管你進行了多少次狀態修改，每個組件都只會被更新一次。

要等待 DOM 更新完成后再執行額外的代碼，可以使用?nextTick()?全局 API：

接下來我會從原理，使用場景，結合源碼和案例等多角度進行講解：

注意：本章內容中的源碼部分使用的vue版本?2.7.16，不同版本的源碼可能會有所不同。使用 npm list vue可以查詢vue版本

一、核心原理

1. 異步更新機制

Vue 的響應式數據變化不會立即觸發 DOM 更新，而是將多個狀態變更批量緩沖到一個隊列中，在下一個事件循環（Event Loop）的微任務階段統一更新 DOM。這種設計優化了性能，避免頻繁的 DOM 操作。

2.?微任務優先

Vue3 的 nextTick() 內部通過 Promise.resolve().then() 實現微任務調度，確保回調在 DOM 更新后執行。若環境不支持 Promise，會降級到 setTimeout（但 Vue3 默認僅支持現代瀏覽器）。

二、核心用法

1.?基礎使用

import { ref, nextTick } from 'vue';const count = ref(0);// 方式1：回調函數
nextTick(() => {console.log('DOM 已更新');
});// 方式2：async/await
async function update() {count.value++;await nextTick();console.log(document.getElementById('counter').textContent); // 最新值
}

?上述案例中執行的步驟如下：

1. 增加?count?的值：count.value++?會立即將?count?的值從?0?增加到?1。
2. 等待 DOM 更新：await nextTick();?會暫停函數的執行，直到 Vue 完成所有的 DOM 更新操作。
3. 打印?count?的最新值：在 DOM 更新完成后，console.log(document.getElementById('counter').textContent);?才會被執行，此時打印的是?id?為?counter?的元素的最新文本內容，即?1。

這段代碼的目的是在數據變化后，確保 DOM 已經更新后再執行后續的邏輯，從而避免獲取到舊的 DOM 狀態的問題。

2.?與生命周期結合

import { onMounted, nextTick } from 'vue';onMounted(async () => {await nextTick(); // 確保子組件渲染完成initThirdPartyLibrary(); // 初始化依賴 DOM 的第三方庫
});

三、應用場景

下面的幾個案例為nextTick?函數一些較為常見的使用場景

1.操作更新后的 DOM

• 當你需要在數據變化后獲取最新的 DOM 狀態時，可以使用?nextTick。
• 例如，獲取某個元素的最新位置、尺寸、內容等。

const inputRef = ref(null);
async function focusInput() {inputRef.value.visible = true;await nextTick();inputRef.value.focus(); // 確保 input 已渲染
}

2.組件通信

父組件修改子組件數據后，等待子組件處理完成：

// 父組件
parentUpdateChildData() {childComponent.value.data = 'new';nextTick(() => {childComponent.value.doSomething(); // 子組件已處理數據});
}

?上述案例代碼邏輯：

• nextTick?確保在 DOM 更新完成后執行回調函數。
• 在?parentUpdateChildData?方法中，首先更新子組件的數據。
• 然后使用?nextTick?等待 DOM 更新完成，之后調用子組件的方法?doSomething，確保此時子組件已經處理了新的數據。

3.動態組件與異步組件

條件渲染組件后操作其 DOM：

const showChild = ref(false);
async function toggleComponent() {showChild.value = !showChild.value;await nextTick();if (showChild.value) {console.log('子組件已掛載:', childComponentRef.value);}
}

?上述代碼中 if (showChild.value) { ... }：檢查 showChild 的值是否為 true。如果是 true，則表示子組件已經被顯示（即掛載到 DOM 中）。

4.性能優化

分批處理大量數據更新，避免阻塞主線程：

const items = ref([]);
async function fetchData() {const newItems = await fetchDataFromAPI();items.value = newItems;await nextTick();console.log('所有數據已渲染');
}

四、源碼解讀

一下為Vue的核心異步機制nextTick函數的解讀，源碼位置位于src/core/util/next-tick.ts中：

核心實現要點

1.任務隊列機制（關鍵數據結構）：

const callbacks: Array<Function> = []  // 回調隊列
let pending = false                     // 執行狀態鎖

2.微任務優先策略（timerFunc 定義邏輯）：

// 優先級順序：Promise > MutationObserver > setImmediate > setTimeout
if (typeof Promise !== 'undefined' && isNative(Promise)) {// 現代瀏覽器：使用微任務const p = Promise.resolve()timerFunc = () => {p.then(flushCallbacks)// 處理IOS WebView的怪異行為if (isIOS) setTimeout(noop)}isUsingMicroTask = true
}
// ...其他環境降級方案...

?3.核心執行邏輯：?

export function nextTick(cb?: (...args: any[]) => any, ctx?: object) {// 將回調封裝后推入隊列callbacks.push(() => {try {cb?.call(ctx)  // 帶上下文執行回調} catch (e) {handleError(e, ctx, 'nextTick')  // 統一錯誤處理}})// 啟動異步隊列（防重入）if (!pending) {pending = truetimerFunc()  // 調用異步策略}// 支持Promise鏈式調用（當無cb參數時）if (!cb && typeof Promise !== 'undefined') {return new Promise(resolve => {_resolve = resolve  // 通過閉包保存resolve引用})}
}

具體流程圖解

1. 初始化：

   • _resolve?初始化為?undefined。
   • 將一個回調函數推入?callbacks?數組。

2. 執行回調函數：

   • 如果?pending?為?false，則設置?pending?為?true。
   • 調用?timerFunc，這會安排在下一個 DOM 更新周期中執行?flushCallbacks。

3. DOM 更新完成：

   • flushCallbacks?函數被調用。
   • 清空?pending?標志。
   • 遍歷并執行?callbacks?數組中的所有回調函數。

4. 回調函數邏輯：

   • 如果提供了回調函數?cb，則調用?cb.call(ctx)，并在調用過程中捕獲任何異常。
   • 如果沒有提供?cb，而是提供了?_resolve，則調用?_resolve(ctx)?解析 Promise。

5. 返回 Promise：

   • 如果沒有提供?cb，并且瀏覽器支持?Promise，則返回一個新的 Promise。

示例

假設我們有以下場景：

parentUpdateChildData() {childComponent.value.data = 'new';nextTick(() => {childComponent.value.doSomething(); // 子組件已處理數據});
}

執行流程

1.更新子組件的數據：

childComponent.value.data = 'new';

這里將子組件?childComponent?的?data?屬性設置為?'new'，觸發 Vue 的響應式系統，開始更新相關的 DOM。

2.調用?nextTick：

nextTick(() => {childComponent.value.doSomething(); // 子組件已處理數據
});

• _resolve?初始化為?undefined。
• 將回調函數?() => { childComponent.value.doSomething(); }?推入?callbacks?數組。
• 檢查?pending?標志是否為?false。如果是，則設置?pending?為?true，并調用?timerFunc?來觸發?flushCallbacks。

3.DOM 更新完成：

• flushCallbacks?函數被調用。
• 清空?pending?標志。
• 遍歷并執行?callbacks?數組中的所有回調函數，即執行?childComponent.value.doSomething();。

4.處理子組件邏輯：

childComponent.value.doSomething();

這里子組件會執行?doSomething?方法，確保此時子組件已經處理了新的數據?'new'。

實現特點分析

1.多環境適配：

• 優先使用微任務（Promise/MutationObserver）保證時序
• 降級方案覆蓋IE9+/Node.js等環境
• 特殊處理iOS WebView的微任務阻塞問題

2.錯誤邊界處理：

try {cb.call(ctx)
} catch (e: any) {handleError(e, ctx, 'nextTick')  // 統一接入Vue錯誤處理系統
}

3.雙模式調用：

// 回調函數模式
Vue.nextTick(() => { /* ... */ })// Promise模式
await Vue.nextTick()

該實現保證了Vue的響應式更新在正確時序執行，同時兼顧了瀏覽器兼容性和性能優化，是Vue異步更新機制的核心基礎。

總結

在Vue源碼中nextTick 通過 異步隊列調度 和 微任務優先級控制，確保回調在 DOM 更新后執行。其源碼設計體現了 Vue3 對性能的極致追求：通過批處理更新、去重任務和微任務機制，平衡了響應速度與渲染效率。理解其原理有助于在復雜場景下合理使用，如異步組件加載、動態 UI 交互優化等。

五、注意事項

1. 避免過度使用 頻繁調用 nextTick 可能導致微任務堆積，影響性能。合并多次數據修改后再調用。

2. 數據未變化的陷阱 若數據未實際變化（如重復賦相同值），Vue 會跳過更新，此時 nextTick 回調不會觸發。可通過 forceUpdate 強制更新（慎用）。

3. 測試環境處理 單元測試中需使用 flushPromises 手動刷新隊列：

   ?
   import { flushPromises } from '@vue/test-utils';
   test('async test', async () => {wrapper.setData({ value: 'new' });await flushPromises(); // 確保 DOM 更新完成
   });?

4. 兼容性：nextTick()?依賴于現代 JavaScript 的異步 API，確保你的運行環境支持這些 API