computed 计算属性

用法

computed接收一个函数getter或者一个对象Options(该对象形如{get: getter, set: setter}), 并返回一个新对象, 这个对象的value属性的值是getter函数的返回值, 当getter内的响应式数据发生变化时, 下次访问value属性时会重新计算getter函数的返回值. 如果传入setter, 该函数会在value属性被修改时触发.

const obj = reactive({ count: 1 })

const count = computed(() => obj.count)

console.log(count.value) // 1
obj.count = 2
console.log(count.value) // 2

原理

首先, computed 会判断传参类型, 并对参数参数进行处理. 然后创建一个ComputedRefImpl实例并返回.

该实例具备依赖收集的能力, 可以收集到依赖与当前计算属性的effect,在该实例内部维护一个effect, fn是getter, 调度函数会触发依赖了当前计算属性收集的依赖的重新执行.

如果每次取值都重新计算, 会存在严重的性能问题, 有如下处理方法: ReactiveEffect 内部维护一个dirty属性, 默认是dirty, 在首次执行后, 该值变为no dirty 重复取值时判断dirty的值, 如果no dirty 则直接返回上次缓存的结果. 依赖每次发生变化(触发更新)后, 将dirty设置为dirty.等待下次重新取值, 每次完成重新取值后, 将dirty设置为no dirty.

对于set函数, 会在value属性被修改时触发