Vue手寫實(shí)現(xiàn)異步更新詳解

更新時(shí)間：2022年08月15日 11:05:22 作者：夏日

這篇文章主要介紹了Vue手寫實(shí)現(xiàn)異步更新詳解，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助

收集去重后的watcher進(jìn)行更新

這里先回顧一下依賴收集的相關(guān)知識(shí)：

頁(yè)面首次掛載，會(huì)從vm實(shí)例上獲取data中的值，從而調(diào)用屬性的get方法來(lái)收集watcher
當(dāng)vm實(shí)例上的屬性更新它的值時(shí)，會(huì)執(zhí)行收集到的watcher的update方法

看下之前完成的代碼：

class Watcher {
  // some code ...
  update () {
    // 直接執(zhí)行更新操作
    this.get()
  }
}

那么watcher的update到底應(yīng)該如何被執(zhí)行呢？這就是本文的重點(diǎn)。

watcher的更新操作主要分為如下倆步：

將watcher去重后放到隊(duì)列中
在異步任務(wù)中執(zhí)行存放的所有watcher的run方法

代碼如下：

class Watcher {
  // some code
  update () {
    queueWatcher(this);
  }

  run () {
    this.get();
  }
}

export default Watcher;

let queue = [];
let has = {}; // 使用對(duì)象來(lái)保存id，進(jìn)行去重操作
let pending = false; // 如果異步隊(duì)列正在執(zhí)行，將不會(huì)再次執(zhí)行

function flushSchedulerQueue () {
  queue.forEach(watcher => {
    watcher.run();
    if (watcher.options.render) { // 在更新之后執(zhí)行對(duì)應(yīng)的回調(diào): 這里是updated鉤子函數(shù)
      watcher.cb();
    }
  });
  // 執(zhí)行完成后清空隊(duì)列
  queue = [];
  has = {};
  pending = false;
}

function queueWatcher (watcher) {
  const id = watcher.id;
  if (!has[id]) {
    queue.push(watcher);
    has[id] = true;
    if (!pending) {
      pending = true;
      // 異步執(zhí)行watcher的更新方法
      setTimeout(flushSchedulerQueue)
    }
  }
}

此時(shí)已經(jīng)實(shí)現(xiàn)了視圖的異步更新，但是Vue還為用戶提供而了$nextTick方法，讓用戶可以在DOM更新之后做些事情。即$nextTick中的方法會(huì)在flushSchedulerQueue 執(zhí)行后才能執(zhí)行，下面就來(lái)看下$nextTick和視圖更新之間的邏輯。

實(shí)現(xiàn)nextTick方法

在queueWatcher中其實(shí)并不是直接調(diào)用setTimeout來(lái)進(jìn)行視圖更新的，而是會(huì)調(diào)用內(nèi)部的nextTick方法。為用戶提供的$nextTick方法，也會(huì)調(diào)用nextTick方法。

該方法實(shí)現(xiàn)如下：

let callbacks = [];
let pending = false;

function flushCallbacks () {
  callbacks.forEach(cb => cb());
  callbacks = [];
  pending = false;
}

export function nextTick (cb) {
  callbacks.push(cb);
  if (!pending) {
    pending = true;
    timerFunc();
  }
}

nextTick會(huì)接收一個(gè)回調(diào)函數(shù)，并將回調(diào)函數(shù)放到callbacks數(shù)組中，之后會(huì)通過(guò)timerFunc來(lái)異步執(zhí)行callbacks中的每一個(gè)函數(shù)：

let timerFunc;
if (Promise) {
  timerFunc = function () {
    return Promise.resolve().then(flushCallbacks);
  };
} else if (MutationObserver) {
  timerFunc = function () {
    const textNode = document.createTextNode('1');
    const observer = new MutationObserver(() => {
      flushCallbacks();
      observer.disconnect();
    });
    const observe = observer.observe(textNode, { characterData: true });
    textNode.textContent = '2';
  };
} else if (setImmediate) {
  timerFunc = function () {
    setImmediate(flushCallbacks);
  };
} else {
  timerFunc = function () {
    setTimeout(flushCallbacks);
  };
}

timerFunc對(duì)異步API進(jìn)行了兼容處理，分別會(huì)先嘗試使用微任務(wù)Promise.then、MutationObserver、setImmediate ，如果這些API瀏覽器都不支持的話，那么會(huì)使用宏任務(wù)setTimeout。

在queueWatcher里我們將flushSchedulerQueue作為參數(shù)執(zhí)行nextTick：

function queueWatcher (watcher) {
  const id = watcher.id;
  if (!has[id]) {
    queue.push(watcher);
    has[id] = true;
    if (!pending) {
      pending = true;
      nextTick(flushSchedulerQueue);
    }
  }
}

在Vue原型上，也要增加用戶可以通過(guò)實(shí)例來(lái)調(diào)用的$nextTick方法，其內(nèi)部調(diào)用nextTick：

Vue.prototype.$nextTick = function (cb) {
  nextTick(cb);
};

$nextTick會(huì)將用戶傳入的回調(diào)函數(shù)也放到callbacks中，通過(guò)異步API來(lái)執(zhí)行。

測(cè)試demo詳解

上面已經(jīng)講解了視圖更新和$nextTick的實(shí)現(xiàn)代碼，接下來(lái)寫一個(gè)demo來(lái)實(shí)踐一下。

下面是實(shí)際開(kāi)發(fā)中可能會(huì)用到的一段代碼：

<div id="app">{{name}}</div>
<script>
  const vm = new Vue({
    el: '#app',
    data () {
      return {
        name: 'zs'
      };
    }
  });
  vm.name = 'ls';
  console.log('$el', vm.$el);
  vm.$nextTick(() => {
    console.log('next tick $el', vm.$el);
  });
</script>

其輸出結(jié)果如下：

在了解了$nextTick的具體實(shí)現(xiàn)后，我們?cè)敿?xì)分析下代碼的執(zhí)行流程：

在修改值之后，我們將要更新的watcher隊(duì)列放到了flushSchedulerQueue函數(shù)中來(lái)執(zhí)行
而nextTick將flushSchedulerQueue放到了callbacks中，通過(guò)異步任務(wù)來(lái)執(zhí)行flushCallbacks
由于異步任務(wù)要等到主線程中的代碼執(zhí)行完畢后才會(huì)執(zhí)行，所以此時(shí)先打印vm.$el，視圖尚未更新
接下來(lái)會(huì)繼續(xù)執(zhí)行vm.$nextTick，將vm.$nextTick中的回調(diào)函數(shù)也放到了callbacks中，但是其位置在flushSchedulerQueue后邊
主線程中的代碼執(zhí)行完畢，開(kāi)始執(zhí)行異步任務(wù)flushCallbacks。首先執(zhí)行flushSchedulerQueue更新DOM，然后再執(zhí)行$nextTick中的回調(diào)函數(shù)，此時(shí)回調(diào)函數(shù)中可以獲取到最新的DOM