Vue3源码解析计划之计算属性为什么比普通函数妙？-vue3 计算属性

[[440389]]

本文转载自微信公众号「前端万有引力」，作者一川。转载本文请联系前端万有引力公众号。

写在前面

计算属性是Vue开发中一个非常实用的API，它允许用户自定义一个计算方法，然后根据一些依赖的响应式数据计算出新值并返回。当依赖发生变化时，计算属性会自动重新计算获取新值，使用方便。我们看出计算属性本质上是对依赖的计算，为什么不直接使用函数呢?在Vue3中的计算属性又是如何实现的呢?

计算属性 computed

我们先简单看个例子，我们看到再设置了计算属性addOne后，直接改变addOne.value的值会报错，只能通过改变原始值count.value才不会报错。这是因为：

如果传递给computed的是一个函数，那就是一个getter函数，只能获取它的值，而不能直接修改它
在getter函数中，根据响应式对象重新计算出新值，叫做计算属性，这个响应式对象叫做计算属性的依赖

const count = ref(1); 
const addOne = computed(()=>count.value+1); 
console.log(addOne.value);//2 
addOne.value++;//error 
count.value++; 
console.log(count.value);//3

那么，我们应该如何修改addOne.value值呢?那就是在computed中设置set函数，进行自定义修改值。

const count = ref(1); 
const addOne = computed({ 
 get:()=>count.value+1, 
  set:val=>count.value=val-1 
}); 
addOne.value = 1; 
console.log(count.value);//0

我们研究源码：

export function computed<T>( 
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T> 
) { 
  let getter: ComputedGetter<T> 
  let setter: ComputedSetter<T> 
 
  // 如果传入是 function 说明是只读 computed 
  if (isFunction(getterOrOptions)) { 
    getter = getterOrOptions 
    setter = __DEV__ 
      ? () => { 
          console.warn('Write operation failed: computed value is readonly') 
        } 
      : NOOP 
  } else { 
    // 不是方法说明是自定义的 getter setter  
    getter = getterOrOptions.get 
    setter = getterOrOptions.set 
  } 
 
  let dirty = true 
  let value: T 
  let computed: ComputedRef<T> 
 
  // 创建 effect, 我们在看 effect 源码时知道了传入 lazy 代表不会立即执行，computed 表明 computed 上游依赖改变的时候，会优先 trigger runner effect, scheduler 表示 effect trigger 的时候会调用 scheduler 而不是直接调用 effect 
  const runner = effect(getter, { 
    lazy: true, 
    // mark effect as computed so that it gets priority during trigger 
    computed: true, 
    scheduler: () => { 
      // 在触发更新时把dirty置为true, 不会立即更新  
      if (!dirty) { 
        dirty = true 
        trigger(computed, TriggerOpTypes.SET, 'value') 
      } 
    } 
  }) 
 
  // 构造一个 computed 返回 
  computed = { 
    __v_isRef: true, 
    // expose effect so computed can be stopped 
    effect: runner, 
    get value() { 
      // dirty为ture, get操作时，执行effect获取最新值 
      //  
      if (dirty) { 
        value = runner() 
        dirty = false 
      } 
      // dirty为false, 表示值未更新，直接返回  
      track(computed, TrackOpTypes.GET, 'value') 
      return value 
    }, 
    set value(newValue: T) { 
      setter(newValue) 
    } 
  } as any 
  return computed 
}

computed计算属性有两个特点：

延时计算：只有当我们访问计算属性时，真正运行computed getter函数计算
缓存：它的内部会缓存上次的计算结果value，而只有dirty为true时才会重新计算，如果访问计算属性时dirty为false，那么直接返回这个value

那么，计算属性的优势是：只要依赖不变化，就可以使用缓存的value而不用每次再渲染组件的时候都执行函数去计算。

做个嵌套计算的小例子，我们看到：对于addOne而言，它收集的依赖是组件副作用渲染函数，而对于count而言，它收集的依赖是addTwo内部的runner函数。当我们修改count值，会进行派发通知，先运行addOne中的setter函数，此时addOne中的dirty值变成true，然后trigger函数再次派发通知;接着运行addTwo中的setter函数，此时把addTwo中的dirty值设置为true;当我们再次访问addTwo中的值时，发现dirty值为true，就会执行addTwo的computed函数，会先去执行addOne.value + 1，再去执行addOne的computed函数中的count.value + 1。这样就得到最后打印出来的值为2。

const count = ref(0); 
const addOne = computed(()=>{ 
 return count.value + 1;//1 
})  
 
const addTwo = computed(()=>{ 
 return addOne.value + 1;//2 
}) 
 
console.log(addTwo.value);//2

得益于computed计算属性的巧妙设计，无论嵌套多少层都能够正常运行。

import {ref,computed} from "vue"; 
import {effect} from "@vue/reactivity"; 
 
const count = ref(0); 
const addOne = computed(()=>{ 
 return count.value + 1; 
}) 
 
effect(()=>console.log(addOne.value+count.value)) 
 
function add(){ 
 count.value++; 
} 
 
add();

我们看到上面代码最终输出结果是：1 3 3

当我们第一次执行addOne的computed计算属性时，count.value值还是0，而addOne.value的值为1，将会触发并执行effect，此时打印出来还是1。而后执行add()函数，会进行修改count.value的值，会触发并执行effect函数，因为addOne也是effect的依赖，addOne的runners函数也是count.value的依赖，count.value值的修改会执行runners函数，会再次执行addOne的依赖，接着会触发effect函数，因此会输出两次3。

computed函数返回的对象实际上劫持的是value属性的getter和setter，但是为什么我们在组件的模板中访问一个计算属性变量，不用手动在后面加.value呢?

参考文章

《Vue3核心源码解析》
《Vue中文社区》
《Vue3中文文档》

写在最后

理解计算属性的工作机制，能够搞明白计算属性嵌套场景代码的执行顺序，知道计算属性的两个特点--延时计算和缓存，在组件的开发中合理使用计算属性。