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

时间:2024-10-27 13:15:01

要理解 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都会被执行。