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方法，进而更新。
（这部分代码不知如何说，故此没写, 具体查看源码）

来源：https://segmentfault.com/a/1190000016495810