vue中$watch源碼閱讀筆記

 項目中使用了vue，一直在比較computed和$watch的使用場景，今天周末抽時間看了下vue中$watch的源碼部分，也查閱了一些別人的文章，暫時把自己的筆記記錄於此，供以后查閱：

實現一個簡單的$watch:

const v = new Vue({
data:{
  a: 1,
  b: {
    c: 3
  }
}
})
// 實例方法$watch，監聽屬性"a"
v.$watch("a",()=>console.log("你修改了a"))
            //當Vue實例上的a變化時$watch的回調
setTimeout(()=>{
v.a = 2
// 設置定時器，修改a
},1000)

這個過程大概分為三部分：實例化Vue、調用$watch方法、屬性變化，觸發回調

一、實例化Vue：面向對象的編程

class Vue { //Vue對象
    constructor (options) {
      this.$options=options;
      let data = this._data=this.$options.data;
      Object.keys(data).forEach(key=>this._proxy(key));
      // 拿到data之后，我們循環data里的所有屬性，都傳入代理函數中
      observe(data,this);
    }
    $watch(expOrFn, cb, options){  //監聽賦值方法
      new Watcher(this, expOrFn, cb);
      // 傳入的是Vue對象
    }

    _proxy(key) { //代理賦值方法
      // 當未開啟監聽的時候，屬性的賦值使用的是代理賦值的方法
      // 而其主要的作用，是當我們訪問Vue.a的時候，也就是Vue實例的屬性時，我們返回的是Vue.data.a的屬性而不是Vue實例上的屬性
      var self = this
      Object.defineProperty(self, key, {
        configurable: true,
        enumerable: true,
        get: function proxyGetter () {
          return self._data[key]
          // 返回 Vue實例上data的對應屬性值
        },
        set: function proxySetter (val) {
          self._data[key] = val
        }
      })
    }
  }

注意這里的Object.defineProperty ( obj, key , option) 方法

總共參數有三個，其中option中包括  set(fn), get(fn), enumerable(boolean), configurable(boolean)

set會在obj的屬性被修改的時候觸發，而get是在屬性被獲取的時候觸發，（其實屬性的每次賦值，每次取值，都是調用了函數）；

 

constructor ：Vue實例的構造函數，傳入參數（options）的時候，constructor 就會被調用，讓Vue對象和參數data產生關聯，讓我們可以通過this.a 或者vm.a來訪問data屬性，建立關聯之后，循環data的所有鍵名，將其傳入到_proxy方法

$watch：實例化Watcher對象

_proxy：這個方法是一個代理方法，接收一個鍵名，作用的對象是Vue對象，

回頭來看Object.defineProperty ( obj, key , option) 這個方法

Object.defineProperty(self, key, {
        configurable: true,
        enumerable: true,
        get: function proxyGetter () {
          return self._data[key]
          // 返回 Vue實例上data的對應屬性值
        },
        set: function proxySetter (val) {
          self._data[key] = val
        }
      })

這個方法的第一個Obj的參數傳入的是self，也就是Vue實例本身，而get方法里，return出來的卻是self._data[key]， _data在上面的方法當中，已經和參數data相等了，所以當我們訪問Vue.a的時候，get方法返回給我們的，是Vue._data.a。

例如：

var vm = Vue({
   data:{
       a:1, 
       msg:'我是Vue實例'      
     } 
})
console.log(vm.msg) //打印 '我是Vue實例'
// 理論上來說，msg和a，應該是data上的屬性，但是卻可以通過vm.msg直接拿到

　　當我們在new Vue的時候，傳進去的data很可能包括子對象，例如在使用Vue.data.a = {a1:1 , a2:2 }的時候，這種情況是十分常見的，但是剛才的_proxy函數只是循環遍歷了key，如果我們要給對象的子對象增加set和get方法的時候，最好的方法就是遞歸；

　　方法也很簡單，如果有屬性值 == object，那么久把他的屬性值拿出來，遍歷一次，如果還有，繼續遍歷，代碼如下：

function defineReactive (obj, key, val) {//  類似_proxy方法，循環增加set和get方法，只不過增加了Dep對象和遞歸的方法
   var dep = new Dep()
    var childOb = observe(val)
    //這里的val已經是第一次傳入的對象所包含的屬性或者對象，會在observe進行篩選，決定是否繼續遞歸
    Object.defineProperty(obj, key, {//這個defineProperty方法，作用對象是每次遞歸傳入的對象，會在Observer對象中進行分化
   enumerable: true,
   configurable: true,
   get: ()=>{
        if(Dep.target){//這里判斷是否開啟監聽模式（調用watch）
          dep.addSub(Dep.target)//調用了，則增加一個Watcher對象
        }
        return val//沒有啟用監聽，返回正常應該返回val
      },
   set:newVal=> {var value =  val
        if (newVal === value) {//新值和舊值相同的話，return
          return
        }
        val = newVal
        childOb = observe(newVal)
    　　　　　　　　　　//這里增加observe方法的原因是，當我們給屬性賦的值也是對象的時候，同樣要遞歸增加set和get方法
        dep.notify()
    　　　　　　　　　　//這個方法是告訴watch，你該行動了
   }
 })
}
function observe (value, vm) {//遞歸控制函數
    if (!value || typeof value !== 'object') {//這里判斷是否為對象，如果不是對象，說明不需要繼續遞歸
      return
    }
  return new Observer(value)//遞歸
}

Opserver對象是使用defineReactive方法循環給參數value設置set和get方法，同時順便調了observe方法做了一個遞歸判斷，看看是否要從Opserver對象開始再來一遍。

Dep起到連接的作用：

class Dep {
    constructor() {
     this.subs = []  //Watcher隊列數組
    }
    addSub(sub){
      this.subs.push(sub) //增加一個Watcher
    }
   notify(){
      this.subs.forEach(sub=>sub.update()) //觸發Watcher身上的update回調（也就是你傳進來的回調）
    }
}
Dep.target = null //增加一個空的target，用來存放Watcher

new Watcher：

class Watcher { // 當使用了$watch 方法之后，不管有沒有監聽，或者觸發監聽，都會執行以下方法
   constructor(vm, expOrFn, cb) {
     this.cb = cb  //調用$watch時候傳進來的回調
     this.vm = vm
     this.expOrFn = expOrFn //這里的expOrFn是你要監聽的屬性或方法也就是$watch方法的第一個參數（為了簡單起見，我們這里補考錄方法，只考慮單個屬性的監聽）
     this.value = this.get()//調用自己的get方法，並拿到返回值
   }
   update(){  // 還記得Dep.notify方法里循環的update么？
     this.run()
   }
   run(){//這個方法並不是實例化Watcher的時候執行的，而是監聽的變量變化的時候才執行的
     const  value = this.get()
     if(value !==this.value){
       this.value = value
       this.cb.call(this.vm)//觸發你穿進來的回調函數，call的作用，我就不說了
     }
   }22             get(){ //向Dep.target 賦值為 Watcher
     Dep.target = this  //將Dep身上的target 賦值為Watcher對象
     const value = this.vm._data[this.expOrFn];//這里拿到你要監聽的值，在變化之前的數值
     // 聲明value，使用this.vm._data進行賦值，並且觸發_data[a]的get事件
     Dep.target = null
     return value
   }
 }

　　class Watcher在實例化的時候，重點在於get方法，我們來分析一下，get方法首先把Watcher對象賦值給Dep.target，隨后又有一個賦值,const value = this.vm._data[this.exOrFn],之前所做的就是修改了Vue對象的data(_data)的所有屬性的get和set？,而Vue對象也作為第一個參數，傳給了Watcher對象，這個this.vm._data里的所有屬性，在取值的時候，都會觸發之前defineReactive 方法.

回過頭來再看看get：

function defineReactive (obj, key, val) {
    /*.......*/
    Object.defineProperty(obj, key, {
  /*.......*/
  get: ()=>{
    if(Dep.target){ //觸發這個get事件之前，我們剛剛對Dep.target賦值為Watcher對象
      dep.addSub(Dep.target)//這里會把我們剛賦值的Dep.target(也就是Watcher對象)添加到監聽隊列里
    }
    return val
  },
  /*.......*/
 }
}

在吧Watcher對象放再Dep.subs數組中之后，new Watcher對象所執行的任務就告一段落，此時我們有：

　 1.Dep.subs數組中，已經添加了一個Watcher對象，

　 2.Dep對象身上有notify方法，來觸發subs隊列中的Watcher的update方法，

　 3.Watcher對象身上有update方法可以調用run方法可以觸發最終我們傳進去的回調

那么如何觸發Dep.notify方法，來層層回調，找到Watcher的run呢？

set:newVal=> {                 
 var value =  val
 if (newVal === value) {
   return
 }
 val = newVal
 childOb = observe(newVal)
 dep.notify()//觸發Dep.subs中所有Watcher.update方法
}

這里形成了一個回路，當修改了所監聽的那個值的時候，這個set方法被觸發。