Vue中nextTick原理

1. 為什么需要 nextTick

Vue 采用 異步渲染機(jī)制，當(dāng)響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)，Vue 并不會(huì)立即更新 DOM，而是將這些變化放入一個(gè) 隊(duì)列 中，并在 同一事件循環(huán)（Event Loop）中合并相同的修改，最后執(zhí)行批量更新。

這樣做的目的是 提升性能，避免不必要的重復(fù)渲染。

例如：

<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); // 現(xiàn)在是 "Vue"
    });
  }
};
</script>

為什么 console.log 還是 "Hello"？

因?yàn)?Vue 在 this.msg = "Vue" 時(shí) 不會(huì)立即更新 DOM，而是等本輪事件循環(huán)結(jié)束后再更新。因此，我們需要 nextTick 來確保獲取到更新后的 DOM。

2. nextTick 的原理

Vue 的 nextTick 本質(zhì)上是一個(gè) 異步任務(wù)調(diào)度器，它會(huì)在當(dāng)前 DOM 任務(wù)完成后執(zhí)行回調(diào)。其內(nèi)部原理主要依賴 微任務(wù)（Microtask）和 宏任務(wù)（Macrotask）。

2.1 任務(wù)隊(duì)列

Vue 內(nèi)部維護(hù)了一個(gè) 回調(diào)隊(duì)列（callback queue），當(dāng) nextTick 被調(diào)用時(shí)，它會(huì)將回調(diào)函數(shù) 推入隊(duì)列，然后等待 Vue 進(jìn)行 DOM 更新后，再依次執(zhí)行這些回調(diào)。

2.2 任務(wù)調(diào)度策略

nextTick 采用 優(yōu)雅降級(jí) 的策略，在不同環(huán)境下選擇最佳的異步方法：

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

代碼實(shí)現(xiàn)：

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. 每次調(diào)用 nextTick(cb)，將 cb 放入 callbacks 隊(duì)列中。
2. 只要 pending === false，就啟動(dòng) 微任務(wù)（Promise.then）。
3. 微任務(wù)執(zhí)行 flushCallbacks，依次調(diào)用 callbacks 隊(duì)列中的所有回調(diào)。

3. nextTick 在 Vue 2 和 Vue 3 的區(qū)別

3.1 Vue 2 的 nextTick

在 Vue 2 中，nextTick 主要依賴：

• Microtask（Promise.then, MutationObserver）
• Macrotask（setImmediate, setTimeout）
• 維護(hù)了一個(gè) 異步任務(wù)隊(duì)列，用于批量執(zhí)行 nextTick 回調(diào)。

3.2 Vue 3 的 nextTick

Vue 3 主要優(yōu)化：

• 只使用 Promise 作為微任務(wù)（不再使用 MutationObserver）。
• 更高效的 異步隊(duì)列處理機(jī)制。

Vue 3 中的 nextTick：

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

優(yōu)化點(diǎn)

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

4. nextTick 的使用場景

4.1 在 DOM 更新后執(zhí)行操作

<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 };
}

總結(jié)

• nextTick 是 Vue 提供的一個(gè) 異步任務(wù)調(diào)度方法，用于在 DOM 更新后執(zhí)行回調(diào)。
• Vue 采用 異步批量更新 機(jī)制，nextTick 可確保 數(shù)據(jù)變更后獲取到最新的 DOM。
• Vue 內(nèi)部采用 Promise（Microtask）優(yōu)先，降級(jí)到 MutationObserver / setTimeout 作為備用方案。
• Vue 3 進(jìn)一步優(yōu)化了 nextTick，減少了不必要的復(fù)雜度，提升了性能。

你可以簡單理解為：

Vue 在修改數(shù)據(jù)后，不會(huì)立即更新 DOM，而是 批量合并修改，并在下一次 事件循環(huán)（Event Loop）結(jié)束時(shí)更新 DOM。nextTick 讓你可以等到 DOM 更新完成后再執(zhí)行操作。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論