面试官-你真的懂computed原理？(源码解读)

要理解 computed 的工作原理，只需要理解下面4个特性

- 特性1：computed默认不执行(因为 lazy 的原因，在新建watcher实例的时候，会将赋值为 undefined，而不会立马进行计算。)

- 特性2：取值的时候，computed里面的方法会被执行

- 特性3：computed是惰性的，computed依赖的其它属性发生变化时，computed不会立即重新计算，要等到获取computed的值，也就是求值的时候才会重新计算(依靠watcher中的lazy属性判断，如果lazy是true，则不执行函数)

- 特性4：computed是缓存的，如果computed依赖的其它属性没有发生变化，即使重新调用，也不会重新计算(依靠watcher中的dirty属性判断，如果dirty是true，则重新计算，否则不计算，直接取watcher内的缓存value)

用法

Vue中computed典型的用法有如下两种：

// 方式1：
computed: {
    fullName() {
        return  + 
    }
}
// 方式2：
computed: {
    fullName: {
        get() {
            ('ooo')
            return  + 
        },
        set() {
            ("set full name")
        }
    }
}

computed源码实现

vue在初始化的时候，如果发现传入的属性是一个computed，则对其进行初始化处理

export function initState(vm: Component) {
  const opts = vm.$options
  if () initProps(vm, )

  // Composition API
  initSetup(vm)

  if () initMethods(vm, )
  if () {
    initData(vm)
  } else {
    const ob = observe((vm._data = {}))
    ob && ++
  }
  if () initComputed(vm, ) // 初始化
  if ( &&  !== nativeWatch) {
    initWatch(vm, )
  }
}

可以看出初始化的优先级是 props->setup->methods->data->computed->watch

initComputed函数

function initComputed(vm: Component, computed: Object) {
  const watchers = (vm._computedWatchers = (null))

  for (const key in computed) {
    const userDef = computed[key]
    // 对 computed 对象遍历，如果定义的是函数则直接取函数，不是则取对象内的get方法
    const getter = isFunction(userDef) ? userDef : 
    if (__DEV__ && getter == null) {
      warn(`Getter is missing for computed property "${key}".`, vm)
    }

    // 定义一个computed-wacther
    watchers[key] = new Watcher(
        vm,
        getter || noop,
        noop,
        { lazy: true }
    )

    // 将key定义在vm上
    defineComputed(vm, key, userDef)
  }
}

computed是一个对象，首先要对其进行遍历。基于其用法的两种不同形式（函数和对象），会对其进行判断。对 computed 对象遍历，如果定义的是函数则直接取函数，不是则取对象内的get方法。
在这里需要将每个computed的属性生成的watcher维护一个watchers，并且放在vm实例上。这样做的用处是，在创建computed getter的时候，可以顺利的获取到它的dirty属性。而dirty=lazy=true。
然后将计算后的属性，定义到vm上

defineComputed方法

function defineComputed(vm, key, userDef) {
    const shouldCache = !isServerRendering()
    if (isFunction(userDef)) {
      //判断是否为缓存，如果不是每一次取值都会走get，如果发现是脏的，就重新获取,如果不是脏的，就不走get
       = shouldCache
      ? createComputedGetter(key)
      : createGetterInvoker(userDef)
       = noop
    } else {
       = 
      ? shouldCache &&  !== false
        ? createComputedGetter(key)
        : createGetterInvoker()
      : noop
       =  || noop
    }
    (target, key, sharedPropertyDefinition)
}

function createGetterInvoker(fn) {
  return function computedGetter() {
    return (this, this)
  }
}

在这个方法中，维护了一个sharedPropertyDefinition对象，用来存储defineProperty的第三个参数。这个对象中的get方法是一个自定义的get方法。即createComputedGetter(key)

之所以要用自定义的，是因为computed取值的时候，是有缓存的，如果没有变化，则不计算

从这里可以看出，computed依赖值发生变化的时候，是调用createComputedGetter的方法的。

createComputedGetter

一旦computed依赖的值发生变化，就会立刻进入这个方法。

function createComputedGetter(key) {
  return function computedGetter() {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      // 重点这段
      if () {
        ()
      }
      if () {
        if (__DEV__ && ) {
          ({
            effect: ,
            target: this,
            type: ,
            key
          })
        }
        ()
      }
      return 
    }
  }
}

在这个方法中，根据每一个watcher实例的dirty属性来判断是否执行计算方法。并返回计算过后的值。因为初始化的时候 dirty = true ，初始化调用 watcher 的evaluate 方法，其实这里可以看出 computed 的缓存就是通过dirty属性来判断，缓存数据存储在watcher的value属性。

（重点：依赖数据watcher和computed的watcher互相绑定）

  evaluate() {
     = ()
     = false
  }

get() {
    pushTarget(this)
    //  = target 通过Dep保存当前 computed-watcher（ = target）并调用我们传入的函数
    let value
    const vm = 
    try {
      value = (vm, vm)
    } catch (e: any) {
      if () {
        handleError(e, vm, `getter for watcher "${}"`)
      } else {
        throw e
      }
    } finally {
      // "touch" every property so they are all tracked as
      // dependencies for deep watching
      if () {
        traverse(value)
      }
      popTarget()
      ()
    }
    return value
  }

export function pushTarget(target?: DepTarget | null) {
  (target)
   = target
}

= target，通过Dep保存当前 computed-watcher（ = target），所以当前的全局保存的是 computed-watcher。当调用 (vm, vm) 会触发依赖项内部的属性的get方法。例如我们使用的是 fullName() { return + }，当计算属性调用fullName 函数，触发和的 get 方法(Observer类内)。

  (obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      const value = getter ? (obj) : val
      if () {
        ()
      }
      return isRef(value) && !shallow ?  : value
    }
  })

  depend(info?: DebuggerEventExtraInfo) {
    if () {
      // 调用 computed-watcher 内的 addDep 方法
      (this)
    }
  }

因为get方法是瞬时同步的，会拦截访问提前执行，执行()，而 = computed-watcher，会执行 watcher 的 addDep 方法。并且将 this（依赖数据的watcher）带到computed-watcher。

  addDep(dep: Dep) {
    const id = 
    if (!(id)) {
      (id)
      (dep)
      if (!(id)) {
        (this)
      }
    }
  }

实参 dep 是依赖数据的watcher，这时将computed的watcher添加到 data的watcher内 ，这样就实现data依赖 收集到 依赖computed的watcher，从而 data 变化时，会同时通知 computed 和 computed的地方。

需要注意的是，在computed的依赖属性的Dep上，收集了两个watcher：

computed的watcher
渲染watcher

这两个watcher都会被执行。

秒客网