计算属性 #

// instance/state.js
if (opts.computed) initComputed(vm, opts.computed)

function initComputed (vm, computed) {
  const watchers = vm._computedWatchers = Object.create(null) // vm中定义计算watcher
  const isSSR = isServerRendering() // 服务端渲染判断 false
  for (const key in computed) {
    const userDef = computed[key]
    const getter = typeof userDef === 'function' ? userDef : userDef.get // 获取定义
    if (!isSSR) {
      watchers[key] = new Watcher(vm, getter || noop, noop, computedWatcherOpt){
        // computedWatcherOptions === { lazy: true }
      }
    }
    if (!(key in vm)) {
      defineComputed(vm, key, userDef)
    } else {
      // 与props或者data属性重名了
    }
  }
}

// observer/watcher.js
class Watcher {
  constructor (vm, expOrFn, cb, options, isRenderWatcher) {
    // vm, getter, noop, { lazy: true }, undeined
    this.vm = vm
    ...
    if (options) {
      this.lazy = !!options.layz // lazy = true
    }
    ...
    this.dirty = this.lazy
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    }
    
    this.value = this.lazy ? undefined : this.get()
    // lazy = true, 第一次初始化watcher实例的时候是不计算的，延迟计算
  }
  evaluate () {
    // 专门给 计算watcher使用的
    this.value = this.get()
    this.dirty = false
  }
}

// instance/state.js
function defineComputed (target, key, userDef) {
  const shouldCache = !isServerRendering() // true
  if (typeof userDef === 'function') {
    sharedPropertyDefinition.get = shouldCache
    	?	createComputedGetter(key) // 返回一个函数
    	: createGetterInvoker(userDef)
    sharedPropertyDefinition.set = noop
  } else {
    // 当设置的computed 是一个对象的时候
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

function createComputedGetter (key) {
  return function computedGetter () { // _render 创建vnode过程中访问
    const watcher = this._computedWatchers && this._computedWatchers[key] 
    // this = vm，拿到vm实例中对应的计算watcher
    if (watcher) {
      if (watcher.dirty) { // 第一次计算的时候true
        watcher.evaluate()
        // 这一步执行watcher传入的getter，这一步中 Dep.target会变成当前 computedWatcher，那么计算过程中所需要的各个data/props则会收集到这个watcher加入他们的订阅者队列
        // evaluate过程后 Dep.target 出栈当前的 computedWatcher
      }
      if (Dep.target) { 
        // 假如还有上一层watcher，如渲染watcher或者另一个调用的computedWatcher
        watcher.depend()
        // dep 的订阅者添加 渲watcher，watcher依赖池添加dep，这些dep是计算过程中收集的
      }
      return watcher.value // 返回计算值
    }
  }
}

// observer/watcher.js
update () {
  if (this.lazy) {
    this.dirty = true; // 更改dirty标识位，标记为脏数据
  } else {
    ...
  }
}