Vue響應式—-資料響應式原理

王興欣發表於2019-02-28
Vue

前言

Vue的資料響應主要是依賴了Object.defineProperty()，那麼整個過程是怎麼樣的呢？以我們自己的想法來走Vue的道路，其實也就是以Vue的原理為終點，我們來逆推一下實現過程。

本文程式碼皆為低配版本，很多地方都不嚴謹，比如 if(typeof obj === `object`)這是在判斷obj是否為為一個物件，雖然obj也有可能是陣列等其他型別的資料，但是本文為了簡便，就直接這樣寫來表示判斷物件，對於陣列使用Array.isArray()。

改造資料

我們先來嘗試寫一個函式，用於改造物件：

為什麼要先寫這個函式呢？ 因為改造資料是一個最基礎也是最重要的步驟,之後所有的步驟都會依賴這一步。

// 程式碼 1.1
function defineReactive (obj,key,val) {
    Object.defineProperty(obj,key,{
        enumerable: true,
        configurable: true,
        get: function () {
            return val;
        },
        set: function (newVal) {
            //判斷新值與舊值是否相等
            //判斷的後半段是為了驗證新值與舊值都為NaN的情況  NaN不等於自身
            if(newVal === val || (newVal !== newVal && value !== value)){
                return ;
            }
            val = newVal;
        }
    });
}複製程式碼

例如const obj = {},然後再呼叫defineReactive(obj,`a`,2)方法，此時在函式內，val=2，然後每次獲取obj.a的值的時候都是獲取val的值，設定obj.a的時候也是設定val的值。（每次呼叫defineReactive都會產生一個閉包儲存了val的值）;

流程討論

經過驗證之後，發現這個函式確實可以使用的。然後我們來討論一下響應的流程：

  1. 輸入資料
  2. 改造資料（defineReactive()）
  3. 如果資料變動 => 觸發事件

我們來看第三步，資料變動如何觸發之後的事件呢？仔細思考一下，如果要改變資料，那麼必須先set資料，那麼我們直接set()裡面新增方法就ok了呀。

然後還有一個重要問題：

依賴收集

我們怎麼知道資料改變之後要觸發的是什麼事件呢？在Vue中：

使用資料 => 檢視； 使用了資料來渲染檢視，那麼在獲取資料的時候收集依賴是最佳的時機，Vue在改造資料屬性的時候生成一個Dep例項，用於收集依賴。

// 程式碼 1.2
class Dep {
    constructor(){
        //訂閱的資訊
        this.subs = [];
    }

    addSub(sub){
        this.subs.push(sub);
    }

    removeSub (sub) {
        remove(this.subs, sub);
    }

    //此方法的作用等同於 this.subs.push(Watcher);
    depend(){
        if (Dep.target) {
            Dep.target.addDep(this);
        }
    }
    //這個方法就是釋出通知了 告訴你 有改變啦
    notify(){
        const subs = this.subs.slice()
        for (let i = 0, l = subs.length; i < l; i++) {
          subs[i].update();
        }
    }
}
Dep.target = null;複製程式碼

程式碼1.2就是Dep的部分程式碼，暫時只需要知道2個方法的作用就可以了

  • depend() — 可以理解為收集依賴的事件，不考慮其他方面的話 功能等同於addSub()
  • notify() — 這個方法更為直觀了，執行所有依賴的update()方法。就是之後的改變檢視啊 等等。

本篇主要討論資料響應的過程，不深入討論 Watcher類，所以Dep中的方法知道作用就可以了。

然後就是改變程式碼1.1了

//程式碼 1.3
function defineReactive (obj,key,val) {
    const dep = new Dep();

    Object.defineProperty(obj,key,{
        enumerable: true,
        configurable: true,
        get: function () {
            if(Dep.target){
                //收集依賴 等同於  dep.addSub(Dep.target)
                dep.depend()
            }
            return val;
        },
        set: function (newVal) {
            if(newVal === val || (newVal !== newVal && val !== val)){
                return ;
            }
            val = newVal;
            //釋出改變
            dep.notify();
        }
    });
}複製程式碼

這程式碼中有一個疑點，Dep.target是什麼？為什麼要有Dep.target才會收集依賴呢？

  1. Dep是一個類，Dep.target是類的屬性，並不是dep例項的屬性。
  2. Dep類在全域性可用，所以Dep.target在全域性能訪問到，可以任意改變它的值。
  3. get這個方法使用很平常，不可能每次使用獲取資料值的時候都去呼叫dep.depend()。
  4. dep.depend()實際上就是dep.addSub(Dep.target)。
  5. 那麼最好方法就是，在使用之前把Dep.target設定成某個物件，在訂閱完成之後設定Dep.target = null。

驗證

是時候來驗證一波程式碼的可用性了

//程式碼 1.4

const obj = {};//這一句是不是感覺很熟悉  就相當於初始化vue的data ---- data:{obj:{}};

//低配的不能再低配的watcher物件（原始碼中是一個類，我這用一個物件代替了）
const watcher = {
    addDep:function (dep) {
        dep.addSub(this);
    },
    update:function(){
        html();
    }
}
//假裝這個是渲染頁面的
function html () {
    document.querySelector(`body`).innerHTML = obj.html;
}
defineReactive(obj,`html`,`how are you`);//定義響應式的資料

Dep.target = watcher;
html();//第一次渲染介面
Dep.target = null;複製程式碼

此時瀏覽器上的介面是這樣的

然後在下開啟了控制檯開始除錯，輸入：

obj.html = `I am fine thank you`複製程式碼

然後就發現，按下回車的那一瞬間，奇蹟發生了，頁面變成了

結尾

Vue資料響應的設計模式和訂閱釋出模式有一點像，但是不同，每一個dep例項就是一個訂閱中心，每一次釋出都會把所有的訂閱全部發布出去。
Vue的響應式原理其實還有很大一部分，本文主要討論了Vue是如何讓資料進行響應，但是實際上，一般的資料都是很多的，一個資料被多處使用，改變資料之後觀察新值，如何觀察、如何訂閱、如何排程，都還有很大一部分沒有討論。主要的三個類Dep（收集依賴）、Observer（觀察資料）、Watcher（訂閱者，若資料有變化通知訂閱者），都只提了一點點。

之前寫有一篇Vue響應式—-陣列變異方法，針對Vue中對陣列的改造進行討論。當然之後有更多其他的文章，整個資料響應流程還有很多內容，三個主要的類都還沒有討論完。

其實閱讀原始碼不僅僅是為了知道原始碼是如何工作的，更重要的是學習作者的思路與方法，我寫的文章都不長，希望自己能夠每次專注一個點，能夠真真實實領悟到這一個點的原理。當然也想控制閱讀時間，免得大家看到一半就關閉了。

相關文章