3.computed原理具体实现：

3.1 initComputed初始化

const computedWatcherOptions={lazy:true}
  function initComputed(vm, computed) {
    const watchers = vm._computedWatchers = Object.create(null)
    const isSSR = isServerRendering()
    for (const key in computed) {
      // userDef我们定义的计算属性
      const userDef = computed[key]
      // 获取getter
      const getter = typeof userDef === 'function' ? userDef : userDef.get
      // 非SSR环境
      if (!isSSR) {
      // 创建watcher实例
        watchers[key] = new Watcher(vm, getter || noop, noop, computedWatcherOptions)
      }
      if (!(key in vm)) {
        defineComputed(vm, key, userDef)
      }
    }
  }

具体讲解：

• initComputed函数接受两个参数：vm实例和computed对象
• 声明了一个变量watchers,并保存在vm._computedWatchers
• 声明变量isSSR用于判断是否在SSR环境
• 使用for…in循环computed对象，以此初始化每个计算属性
• 用getter保存计算结果的值
• 创建watcher实例
• 判断计算属性的值是否已经在vm实例上定义了，如果没有，执行defineComputed函数

到这里，我们就明白了，最后我们会执行defineComputed函数，对每个计算属性进行定义和初始化。下面我们来看看这个函数。

3.2 defineComputed定义计算属性

  const sharePropertyDefinition={
    enumerable:true,
    configurable:true,
    get:noop,
    set:noop
  }
  function defineComputed(target,key,userDef){
    // 判断环境
    const shouldCache=!isServerRendering()
    // 设置的为函数
    if(typeof userDef==='function'){
      sharePropertyDefinition.get=shouldCache?createComputedGetter(key):userDef
      sharePropertyDefinition.set=noop
    }
    // 设置的为对象
    else{
      sharePropertyDefinition.get=userDef.get?shouldCache&&userDef.cache!=false?createComputedGetter(key):userDef.get:noop
      sharePropertyDefinition.set=userDef.set?userDef.set:noop
    }
    Object.defineProperty(target,key,sharePropertyDefinition)
  }

具体讲解：

• 首先定义sharePropertyDefinition变量，用于配合Object.defineProperty使用。
• 函数defineComputed接受target,key,userDef三个参数
• 使用shouldCache变量确认是否在SSR环境
• 判断userDef是否为函数，因为我们知道我们传入的computed支持函数或者对象
• 如果是函数，判断shouldCache，为true时执行createComputedGetter函数,并赋值给 sharePropertyDefinition.get
• 如果不是函数，是否写了get函数，判断shouldCache，为true时执行createComputedGetter函数，并赋值给 sharePropertyDefinition.get
• 在判断用户是否写了set函数，写了就赋值给sharePropertyDefinition，noop为空函数。
• 在最后，执行Object.defineProperty向实例挂载属性

所以，计算属性的缓存和响应式主要在于是否将getter方法设置为createComputedGetter。因为最终挂载到get方法的就是createComputedGetter函数。

3.3createComputedGetter缓存与响应式的关键

function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate()
      }
      if (Dep.target) {
        watcher.depend()
      }
      return watcher.value
    }
  }
}

具体讲解：

• 在initComputed函数中我们定义了_computedWatchers属性，通过_computedWatchers[key]拿到我们定义的watcher,所以变量watcher就是每个watcher的实例
• 判断watcher.dirty值是否为真，为真就重新计算一下,也就是执行watcher.evaluate()
• 判断Dep.target的值，如果有，就执行 watcher.depend()，最后返回watcher的value值。

代码是非常简单的，但是理解起来是需要配合watcher和dep的，如果不了解可以参考我这篇文章： 深入浅出Vue变化侦测

3.4 与watcher密不可分

class Watcher{
    constructor(vm,expOrFn,cb,options){
        // 无关代码
        if(options){
            this.lazy=!!options.lazy
        }
        this.dirty = this.lazy
    }
    evaluate () {
    this.value = this.get()
    this.dirty = false
  }

  /**
   * Depend on all deps collected by this watcher.
   */
  depend () {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()
    }
  }
}

evaluate方法:就是从watcher重新获取一次表达式的值
depend方法:

• this.deps[i]就是计算属性所依赖的状态
• 调用depend方法可以将组件的watcher实例添加到dep实例中，意思就是计算属性所依赖的状态改变也会通知组件，更具体说，就是组件watcher也会观察计算属性所依赖的状态。（组件watcher是如何拿到的呢）