vue 視圖、計算屬性、watch數據實現綁定原理

通過數據劫持set發佈消息，通過watcher進行訂閱消息，從而觸發update

代碼1

export class Observer {
  ...
  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
   ...
  }

代碼2

Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend() //watcher放入dep.subs中
       ...
      }
      return value
    },
    ...
    })

代碼3

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

代碼4

get () {
    pushTarget(this) //watcher放入Dep.target中
    let value
    const vm = this.vm
    try {
      value = this.getter.call(vm, vm) // 執行getter
    } catch (e) {
      if (this.user) {
        handleError(e, vm, `getter for watcher "${this.expression}"`)
      } else {
        throw e
      }
    }
    ...
    return value
  }

代碼5

function initComputed (vm: Component, computed: Object) {
  // $flow-disable-line
  const watchers = vm._computedWatchers = Object.create(null) // 同一個引用
  // computed properties are just getters during SSR
  const isSSR = isServerRendering()

  for (const key in computed) {
    const userDef = computed[key]
    const getter = typeof userDef === 'function' ? userDef : userDef.get
    if (process.env.NODE_ENV !== 'production' && getter == null) {
      warn(
        `Getter is missing for computed property "${key}".`,
        vm
      )
    }

    if (!isSSR) {
      // create internal watcher for the computed property.
      watchers[key] = new Watcher( //放入computedWatchers中
        vm,
        getter || noop,
        noop,     
      )
    }
	...
  }
}

代碼6

update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

代碼7

function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate() // 更新watcher.value並設置dirty爲false
      }
      if (Dep.target) {
        watcher.depend()
      }
      return watcher.value
    }
  }
}