Vue3源码解析计划(五):计算属性为什么比普通函数妙?

·  阅读 231
Vue3源码解析计划(五):计算属性为什么比普通函数妙?

写在前面

计算属性是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呢?

参考文章

写在最后

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改