之前我們學到了 Vue 更新資料是如何更新檢視的。

簡單回顧

資料更新（setter）-> 通知依賴收集集合（Dep） -> 呼叫所有觀察者（Watcher） -> 比對節點樹（patch） -> 檢視

在更新檢視這一步，使用非同步更新策略

為什麼呢？引用小冊中的例子,下面有一個這樣的 Vue 元件

<template>
  <div>
    <div>{{number}}</div>
    <div @click="handleClick">click</div>
  </div>
</template>
<script>
export default {
    data () {
        return {
            number: 0
        };
    },
    methods: {
        handleClick () {
            for(let i = 0; i < 1000; i++) {
                this.number++;
            }
        }
    }
}
</script>
 

在for迴圈中，我們連續更改了1000次繫結資料 number ，如果使用同步更新，則需要1000次的 patch ，也就是1000次的 Diff ，1000次更新，這就很可怕了。

所以，在 Vue 裡使用非同步更新的方法，每次觸發某個資料的 setter 方法後，對應的 Watcher 物件其實會被 push 進一個佇列 queue 中，在下一個 tick（代表一次非同步） 的時候將這個佇列 queue 全部拿出來 run（ Watcher 物件的一個方法，用來觸發 patch 操作） 一遍。

nextTick

在 Vue 裡，實現了一個 nextTick 函式，主要用來非同步操作，引數為一個 callback 函式，會被存放在 callback 佇列中，在下一個 tick 時觸發佇列中的所有 callback 事件。

在 Vue 原始碼中，使用 setImmediate、MessageChannel、setTimeout 來實現 macroTimerFunc（nextTick 中使用的非同步方法），使用 Promise 來實現 microTimerFunc ，感興趣可以看看 next-tick 。下面我們同樣用 setTimeout 來舉例。

/* cb 函式集合、 pending 是一個標記位，代表一個等待的狀態 */
let callbacks = [];
let pending = false;

/**
    * 非同步鉤子函式
    * 目的是在當前呼叫棧執行完畢以後（不一定立即）才會去執行這個事件
    */
function nextTick(cb) {
    callbacks.push(cb);
    
    /* 第一次執行時，設定非同步執行器 timeout 當前執行棧執行完，呼叫 flushCallbacks */
    if (!pending) {
        pending = true;
        setTimeout(flushCallbacks, 0);
    }
}

/* cb 集合執行函式 */
function flushCallbacks() {
    pending = false;
    /* 生成 cb 集合副本 copies */
    const copies = callbacks.slice(0);
    /* cb 集合長度賦值為0 */
    callbacks.length = 0;
    for (let i = 0; i < copies.length; i++) {
        copies[i]();
    }
}
 

注意：Vue文件中說明，在DOM更新之後立即執行callback函式，可以使用Vue.$nextTick()，我理解是應該是將這些callback函式，放在dom更新的函式後面

重寫Watcher

在前面說到，連續更新1000次 number ，不可能連續渲染檢視1000次，因此 有一個 queue 佇列來收集過濾 Watcher ，同一個 Watcher 在同一個 tick 的時候只執行一次。

/* 用來給 Watcher 作唯一標識 */
let uid = 0;

/* 觀察者 */
class Watcher {
    constructor() {
        /* 標識 */
        this.id = ++uid;
    }

    /* 呼叫 queueWatcher 將 Watcher 推入過濾佇列 */
    update() {
        console.log('watch' + this.id + ' update');
        queueWatcher(this);
    }

    /* 更新檢視函式 在函式裡觸發 patch  */
    run() {
        console.log('watch' + this.id + '檢視更新啦～');
    }
}

注意：  update 方法，在修改資料後由 Dep 物件來呼叫，而 run 函式才是真正觸發 patch 函式更新檢視的方法

queueWatcher

用來存放並過濾相同 Watcher 的函式，第一次呼叫時，會將呼叫執行 Watcher 佇列的函式推入 nextTick 函式，達到非同步更新的效果。

/* 用來區分當前 Watcher 是否已存放的 map  */
let has = {};
/* 存取 Watcher 的佇列 */
let queue = [];
/* 標識位，標記是否已經向 nextTick 傳遞了 flushSchedulerQueue 方法 */
let waiting = false;

function queueWatcher(watcher) {
    const id = watcher.id;
    /* 相同的 Watcher 不會被重複傳入 */
    if (has[id] == null) {
        has[id] = true;
        queue.push(watcher);

        /* 第一次被呼叫，將 flushSchedulerQueue 函式推入 nextTick */
        if (!waiting) {
            waiting = true;
            nextTick(flushSchedulerQueue);
        }
    }
}

flushSchedulerQueue

用來呼叫所有佇列中的 Watcher.run() 函式，觸發 patch 函式。

/* 用來呼叫所有佇列中的 Watcher.run() 函式，觸發 patch 函式 */
function flushSchedulerQueue() {
    let watcher, id;

    for (index = 0; index < queue.length; index++) {
        watcher = queue[index];
        id = watcher.id;
        /* 將區分 map 歸為原始值 */
        has[id] = null;
        watcher.run();
    }

    waiting = false;
}

參考文章