VUE 3.0源码之computed

冷不防 2022-12-08 04:18 80阅读 0赞

#### 1. 入口 ####

computed方法首先调用\_computed实现计算属性，然后调用recordInstanceBoundEffect记录当前的effect，方便当组件卸载时清除

import {  computed as _computed } from '@vue/reactivity'
    
    function computed<T>(
      getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
    ) { 
      const c = _computed(getterOrOptions as any)
      recordInstanceBoundEffect(c.effect)
      return c
    }

#### 2. 实现 ####

首先收集getter和setter，然后调用[effect][]方法生成一个响应式功能的函数，最后返回一个有`get value`和`set value`的对象。

// @vue/reactivity/computed
    function computed<T>(
      getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
    ) { 
      let getter: ComputedGetter<T>
      let setter: ComputedSetter<T>
    
      if (isFunction(getterOrOptions)) { 
        getter = getterOrOptions
        setter = __DEV__
          ? () => { 
              console.warn('Write operation failed: computed value is readonly')
            }
            // 空函数
          : NOOP
      } else { 
        getter = getterOrOptions.get
        setter = getterOrOptions.set
      }
    
      let dirty = true
      let value: T
      let computed: ComputedRef<T>
    
      // 生成一个effect用于依赖收集和注册
      const runner = effect(getter, { 
        lazy: true,
        computed: true,
        scheduler: () => { 
          if (!dirty) { 
            dirty = true
            // 触发相关依赖，通知计算属性更新，这样也可以重新触发get value
            trigger(computed, TriggerOpTypes.SET, 'value')
          }
        }
      })
      computed = { 
        _isRef: true,
        effect: runner,
        get value() { 
          // 通过dirty控制是否需要重新运行getter
          if (dirty) { 
            value = runner()
            dirty = false
          }
          // 收集依赖
          track(computed, TrackOpTypes.GET, 'value')
          return value
        },
        set value(newValue: T) { 
          setter(newValue)
        }
      } as any
      return computed
    }

#### 3. 原理 ####

计算属性在注册时是不会触发getter的，这样可以避免没必要的性能损失。

###### get value ######

当触发`get value`时且dirty为true时触发[effect][]生成的runner，这时会调用getter方法并触发getter方法中的响应式变量的getter实现依赖注册，接着生成新值并将dirty设为false，最后调用[track][effect]方法收集依赖。

###### 更新 ######

当getter中的响应式数据变更时，会触发调用effect方法时传入的scheduler，这时会把dirty设为true并调用trigger方法通知相关依赖，这时依赖会触发`get value`

###### value ######

多加一层value是因为当计算属性直接返回一个如字符串等类型的值的时候，该计算属性的内部逻辑就会丢失。

[effect]: https://blog.csdn.net/soooyoung/article/details/105560739