前端培训：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而言，web前端培训它收集的依赖是组件副作用渲染函数，而对于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呢？