vue異步更新dom的實(shí)現淺析

目錄

Data對象：vue中的data方法中返回的對象；

Dep對象：每一個(gè)Data屬性都會(huì )創(chuàng )建一個(gè)Dep，用來(lái)搜集所有使用到這個(gè)Data的Watcher對象；

Watcher對象：主要用于渲染DOM

Vue異步更新DOM的原理

Vue中的數據更新是異步的，意味著(zhù)我們在修改完Data之后并不能立刻獲取修改后的DOM元素。

1 什么時(shí)候能獲取到真正的DOM元素？

　　在Vue的nextTick回調中。

2 為什么Vue需要通過(guò)nextTick方法才能獲取最新的DOM？

2.1 vue在調用Watcher更新視圖時(shí)，并不會(huì )直接進(jìn)行更新，而是把需要更新的Watcher加入到Queue隊列里，然后把具體的更新方法flushSchedulerQueue 傳給nexTick 進(jìn)行調用。

// src > core > observer > watcher.js + scheduler.js// 當一個(gè) Data 更新時(shí)，會(huì )依次執行以下代碼
// 1. 觸發(fā) Data.set
// 2. 調用 dep.notify
// 3. Dep 會(huì )遍歷所有相關(guān)的 Watcher 執行 update 方法
class Watcher {
  // 4. 執行更新操作
  update() {
    queueWatcher(this);
  }
}

const queue = [];

function queueWatcher(watcher: Watcher) {
  // 5. 將當前 Watcher 添加到異步隊列
  queue.push(watcher);
  // 6. 執行異步隊列，并傳入回調
  nextTick(flushSchedulerQueue);
}

// 更新視圖的具體方法
function flushSchedulerQueue() {
  let watcher, id;
  // 排序，先渲染父節點(diǎn)，再渲染子節點(diǎn)
  // 這樣可以避免不必要的子節點(diǎn)渲染，如：父節點(diǎn)中 v-if 為 false 的子節點(diǎn)，就不用渲染了
  queue.sort((a, b) => a.id - b.id);
  // 遍歷所有 Watcher 進(jìn)行批量更新。
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index];
    // 更新 DOM
    watcher.run();
  }
}

2.2 nextTick -- 將傳入的flushSchedulerQueue 添加到callbacks 數組中，然后執行了timerFunc 方法。

const callbacks = [];
let timerFunc;

function nextTick(cb?: Function, ctx?: Object) {
  let _resolve;
  // 1.將傳入的 flushSchedulerQueue 方法添加到回調數組
  callbacks.push(() => {
    cb.call(ctx);
  });
  // 2.執行異步任務(wù)
  // 此方法會(huì )根據瀏覽器兼容性，選用不同的異步策略
  timerFunc();
}

2.3 timerFunc方法 -- 是根據瀏覽器兼容性創(chuàng )建的一個(gè)異步方法，執行完該方法就會(huì )調用flushSchedulerQueue 方法進(jìn)行具體的DOM更新。

let timerFunc;
// 判斷是否兼容 Promise
if (typeof Promise !== "undefined") {
  timerFunc = () => {
    Promise.resolve().then(flushCallbacks);
  };
  // 判斷是否兼容 MutationObserver
  // https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
} else if (typeof MutationObserver !== "undefined") {
  let counter = 1;
  const observer = new MutationObserver(flushCallbacks);
  const textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
    characterData: true,
  });
  timerFunc = () => {
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
  // 判斷是否兼容 setImmediate
  // 該方法存在一些 IE 瀏覽器中
} else if (typeof setImmediate !== "undefined") {
  // 這是一個(gè)宏任務(wù)，但相比 setTimeout 要更好
  timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  // 如果以上方法都不知道，使用 setTimeout 0
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

// 異步執行完后，執行所有的回調方法，也就是執行 flushSchedulerQueue
function flushCallbacks() {
  for (let i = 0; i < copies.length; i++) {
    callbacks[i]();
  }
}

2.4 完善邏輯判斷

2.4.1 判斷has 標識，避免在一個(gè)Queue 中添加相同的Watcher；

2.4.2 判斷waiting 標識，讓所有的Watcher 都在一個(gè)tick 內進(jìn)行更新；

2.4.3 判斷flushing 標識，處理Watcher 渲染時(shí)，可能產(chǎn)生的新Watcher。

　　如觸發(fā)了v-if 條件，新增的Watcher 渲染。

tip：nextTick 只是單純通過(guò)Promise、setTimeout等方法模擬的異步任務(wù)。

3 為什么this.$nextTick 能夠獲取更新后的DOM？

　　調用this.$nextTick 其實(shí)就是調用圖中的nextTick 方法，在異步隊列中執行回調函數。根據先進(jìn)先出原則，修改Data 觸發(fā)的更新異步隊列會(huì )先得到執行，執行完成后就生成了新的DOM，接下來(lái)執行this.$nextTick 的回調函數時(shí)，能獲取到更新后的DOM元素了。

// 我們使用 this.$nextTick 其實(shí)就是調用 nextTick 方法
Vue.prototype.$nextTick = function (fn: Function) {
  return nextTick(fn, this);
};

總結：vue異步更新的原理

修改 Vue 中的 Data 時(shí)，就會(huì )觸發(fā)所有和這個(gè) Data 相關(guān)的 Watcher 進(jìn)行更新。首先，會(huì )將所有的 Watcher 加入隊列 Queue。然后，調用 nextTick 方法，執行異步任務(wù)。在異步任務(wù)的回調中，對 Queue 中的 Watcher 進(jìn)行排序，然后執行對應的 DOM 更新。

到此這篇關(guān)于vue異步更新dom的實(shí)現淺析的文章就介紹到這了,更多相關(guān)vue異步更新dom內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！