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中對數組的改造進行討論。固然以後有更多其餘的文章，整個數據響應流程還有不少內容，三個主要的類都尚未討論完。

其實閱讀源碼不只僅是爲了知道源碼是如何工做的，更重要的是學習做者的思路與方法，我寫的文章都不長，但願本身可以每次專一一個點，可以真真實實領悟到這一個點的原理。固然也想控制閱讀時間，省得你們看到一半就關閉了。