【VUE3源码解读】计算属性详解计算属性是 VUE 中一个非常实用的 API，它是用户定义的一个计算方法，并根据一些响

计算属性是 VUE 中一个非常实用的 API，它是用户定义的一个计算方法，并根据一些响应式数据计算出新值并返回。当依赖发生变化的时候，计算属性会重新计算。

在 vue2 中是通过 computed 属性来实现的，vue3 中可以继续沿用 vue2 的使用方式，也可以单独使用计算属性 API。

vue3 中的使用样例：

const count = ref(1)
const plusone = computed(() => count.value + 1)

当我们修改 count.value 时，pulsone.value 会自动变化。

需要注意的是：我们直接修改 pulsone.value 会报错，因为我们给 computed 传递的是一个函数，默认是 getter 函数，只能获取不能直接修改。如果想要直接修改 computed 的返回值，可以给 computed 传入一个对象：

const count = ref(1)
const plusone = computed({
    get: () => count.value + 1,
    set: val => {
        count.value = val - 1 
    }
})

原理：

computed 函数拥有单个参数，它既可以是 getter 函数，也可以是一个对象，所以 computed 第一步要标准化参数，如果传递的仅是 getter 函数，一旦修改了计算属性的值，就会提醒你该属性的值是只读的。

接下来用图来展示一下基本的运行机制：

通过分析可以看到计算属性的两个特点：

计算属性是可以嵌套使用的。

const count = ref(0)
const plusone = computed(() => {
    return count.value + 1
})
const plustwo = computed(() => {
    return plusone.value + 1
})

【VUE3源码解读】 计算属性详解