如果你覺得排版難看，請點選 下面連結 或者 拉到 下面關注公眾號也可以吧

【Vue原理】Watch - 原始碼版

今天繼續探索 Watch 原始碼，廢話不多說了

帶著我的幾個疑問開始

1、什麼時候初始化

2、怎麼確定監聽哪些值

3、深度監聽怎麼回事

4、怎麼觸發我的函式

這些問題的答案會摻雜在原始碼的解析中，我發現這幾篇的寫作套路都差不多.....

也可以看查一下我的白話版

---

什麼時候初始化

首先，從這個問題開始我們今天的探索之旅，請看原始碼

function Vue(){
    ... 其他處理
    initState(this)

    ...解析模板，生成DOM 插入頁面

}



function initState(vm) {


    ...處理 data，props，computed 等資料

    if (opts.watch) {
        initWatch(this, vm.$options.watch);
    }
}
 

沒錯，當你呼叫 Vue 建立例項過程中，會去處理各種選項，其中包括處理 watch

---

initWatch

處理 watch的方法是 initWatch，下面就呈上 原始碼

function initWatch(vm, watch) {    

    for (var key in watch) {    

        var watchOpt = watch[key];
        createWatcher(vm, key, handler);
    }
}

然後這段原始碼並沒有做什麼驚天地泣鬼神的事情，只是簡簡單單的一個遍歷，然後每個watch 都使用一個叫什麼 createWatcher 的東西去處理

這個函式到底是幹嘛的？暗藏著什麼祕密，歡迎來到我們今晚的 《走近科學》《原始碼解析》

createWatcher 來看看他的真身

function createWatcher(
    // expOrFn 是 key，handler 可能是物件
    vm, expOrFn, handler,opts

) {    

    // 監聽屬性的值是一個物件，包含handler，deep，immediate

    if (typeof handler ==="object") {
        opts= handler
        handler = handler.handler
    }    



    // 回撥函式是一個字串，從 vm 獲取

    if (typeof handler === 'string') {
        handler = vm[handler]
    }    



    // expOrFn 是 key，options 是watch 的全部選項

    vm.$watch(expOrFn, handler, opts)
}
 

大概就這樣吧

1、獲取到監聽回撥

2、呼叫 vm.$watch

1、獲取監聽回撥

首先，你傳入的 watch 配置可能是這三種（還有更多，差不多，不解釋，累死我）

如果配置是個物件，就取handler 欄位

如果配置是函式，那麼直接就是 監聽回撥

如果配置是字串，從例項上獲取函式

2、呼叫 vm.$watch

看著這個方法，簡直 mmp，還有完沒完，我從一個函式進入一個函式，又從這個函式進入到另一個函式，迷宮啊這是.....

顯然你不用急，下面還有更多......

好吧，還是先看原始碼

Vue.prototype.$watch = function(
    // expOrFn 是 監聽的 key，cb 是監聽回撥，opts 是所有選項

    expOrFn, cb, opts

){    

    // expOrFn 是 監聽的 key，cb 是監聽的回撥，opts 是 監聽的所有選項

    var watcher = new Watcher(this, expOrFn, cb, opts);    



    // 設定了立即執行，所以馬上執行回撥

    if (opts.immediate) {
        cb.call(this, watcher.value);
    }
};

看完了吧？這麼短，你們肯定看得懂的啦，就兩件事

1、判斷是否立即執行監聽回撥

如果你設定了 immediate 的話，表示不用等我資料變化，初始化時馬上執行一遍，執行的程式碼就是直接呼叫 回撥，繫結上下文，傳入監聽值

2、每個 watch 配發 watcher

程式碼從這裡開始變得沉重，各位觀眾，喝口水，恰口飯，屏息觀看操作

看看 watcher 的原始碼

“watcher 的原始碼之前的文章也講過很多，但是對於每種選項的涉及的細節是不一樣的，所以每次都放上來，但是隻放跟本內容相關的部分程式碼，其他的省去以便我們快速理解”

var Watcher = function (vm, key, cb, opt) {  

    this.vm = vm;    

    this.deep = opt.deep;    

    this.cb = cb;  

    // 這裡省略處理 xx.xx.xx 這種較複雜的key
    this.getter = function(obj) {        

        return obj[key]

    };    

    // this.get 作用就是執行 this.getter函式

    this.value = this.get();
};

再看看，新建 watcher 的時候 ，傳入了什麼

1、監聽的 key

2、監聽回撥 （Watch 中的cb）

3、監聽配置的options

這裡會涉及到三個問題，現在來解釋

1、怎麼對設定的 key 進行監聽？

我們要先對 Watch 中的 this.getter 的函式進行理解，他的本質是為了獲取物件的key值

然後 getter 是在 watcher.get 中執行的，看下 get 原始碼

// 對本問題進行了獨家簡單化的原始碼

Watcher.prototype.get = function() {    

    var value = this.getter(this.vm);    

    return value

};

你能看到，Watch 在結尾會立即執行一次 watcher.get，其中便會執行 getter，便會根據你監聽的key，去例項上讀取並返回，存放在 watcher.value 上

看到了嗎，從例項上讀取屬性，這句話。

首先，watch 初始化之前，data 應該初始化完畢了，每個 data 資料都已經是響應式的

使用例子來說明一下

當 watch.getter 執行，而讀取了 vm.name 的時候，name的依賴收集器就會收集到 watch-watcher

於是 name 變化的時候，會可以通知到 watch，監聽就成功了

2、如何進行深度監聽？

首先，深度監聽，是你設定了 deep 的時候，如下

然後，觀察上面的 Watch 原始碼，deep 會儲存在watcher 中，以便後用

話鋒一轉

上一問題說過，在 新建 watcher 的時候，會馬上執行一個 get，上個問題的 get 原始碼簡化很多，把 處理深度監聽的部分去掉了，這裡露出來了

Watcher.prototype.get = function() {
    Dep.target= this

    var value = this.getter(this.vm)    

    if (this.deep)  traverse(value)

    Dep.target= null
    return value
};

沒錯，處理深度監聽只有一條語句！

if (this.deep)  traverse(value)

value 是 getter 從例項上讀取監聽key 得到的值，沒有疑問

但是 traverse 是何方神聖？come on 讓我們深入....

function traverse(val) {    

    var i, keys;    



    // 陣列逐個遍歷

    if (Array.isArray(val)) {

        i = val.length;        

        // val[i] 就是讀取值了，然後值的物件就能收集到 watch-watcher

        while (i--) {
           traverse(val[i])
        }
    }    

    else {

        keys = Object.keys(val);
        i = keys.length;        

        // val[keys[i]] 就是讀取值了，然後值的物件就能收集到 watch-watcher

        while (i--) {
           traverse(val[keys[i]])
        }
    }
}

你看它這段程式碼長，其實是個紙老虎，做的就是一個事情，不斷遞迴深入讀取物件

他的想法是這樣的

因為讀取，就可以讓這個屬性收集到 watch-watcher 的原則

就算是深層級的物件，其中的每個屬性也都是響應式的，每個屬性都有自己的依賴收集器

通過不斷深入的讀取每個屬性，這樣每個屬性就都可以收集到 watch-watcher 了

這樣不管物件內多深的屬性變化，都會通知到 watch-watcher

於是這樣就完成了深度監聽

3、監聽值變化，如何觸發監聽函式？

通過上面的問題，我們已經瞭解了大部分了

監聽的資料變化的時候，就能通知 watch-watcher 更新，所謂通知更新，就是手動呼叫 watch.update

速度看下 watcher.update 原始碼

Watcher.prototype.update= function() {    

    var value = this.get();    

    if (this.deep) {        

        var oldValue = this.value;        

        this.value = value;        

        // cb 是監聽回撥
        this.cb.call(this.vm, value, oldValue);
    }
};

很簡單嘛，就是讀取一遍值，然後儲存新值，接著 呼叫 監聽回撥，並傳入新值和 舊值

ok，就這樣

相關推薦