vue觀察模式淺析

如下是我對vue觀察者模式的理解:
github L6zt

---

加入tip 2018-10-14 最近又看到《js設計模式設計》書 推薦去摟摟
不要對框架的偏見, 你真的瞭解jquery、angular、react 等等，框架是什麼只是工具而已。
你用過jquery的 trigger、on、off 事件綁定的方法嗎？事實上 vue 不過也是這種模式，只不過vue 是自動調用on方法，自動觸發trigger。甚至能夠不用jquery對事件監聽觸發的實現。其實最終解釋就是對某種事件的callback（基礎原理）。
如下是源碼目錄截圖：

1... vue 實例初始化時，會對data函數返回的對象裏的屬性調用如下方法，代碼註釋以下:

// 這個是 vue 綁定自動綁定事件的方法和觸發事件方法, 會把data函數返回的對象變量屬性，重寫對應屬性的 賦值 和獲取的操做。具體查看 （mdn  Object.defineProperty api）
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // watcher 對象， 若是存在
      if (Dep.target) {
        // 把Watcher 實例 推入 Dep 實例的 subs 數組裏， 這個就至關於 on
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      // 通知 Dep 實例 中subs 裏數組 中全部 Watcher 實例, 而後調用Watcher實例裏的 update方法(), 這個就至關於 trigger。
      dep.notify()
    }
  })

// Watcher 構造函數 
 constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  )

2...Watcher初始化時，會調用Dep.pushTarget方法, 把 Wathcer實例賦值到dep.js 裏的Dep.target, 接着會根據 exporFn，運行exporFn 所表明的方法。這個方法裏基本上包含調用 1...裏的getter方法(想一想render鉤子裏的操做基本有獲取vue實例屬性data裏的值或者獲取vue實例的計算屬性的值)。

var vm = new Vue({
    data () {
        return {msg: '找個小姐姐！'}
    },
    // 至關於 exporFn
    render(h) {
        return h('h3', {},
          // 這裏面就會調用 msg 對應的 getter方法
          this.msg
        )
    }
})

因此就會使 render 函數 與 Vue 實例 的 數據 data屬性 和觀察屬性等產生聯繫，這就造成一個閉環。當其中的屬性變化，就會自動調用 setter 方法，從而觸發dep.notify 方法，進而又會觸發 dep.subs 裏的 Watcher 實例調用 update方法，進而更新。
（這部分代碼不知如何說，故此沒寫, 具體查看源碼）