持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

Comupted 计算属性

当依赖的属性的值发生变化时，才会触发计算属性的更改，如果依赖的属性的值未发生改变，则使用缓存中的属性值。

上面是Computed的源码，可以看到，它的第一个参数可以是一个getter函数也可以是一个配置对象。它会先用isFunction来判断我们传入的第一个参数是函数还是对象，如果是函数，则将它赋值给getter，如果是配置对象，则将配置对象中的get和set分别赋值给getter和setter，最后返回一个ComputedRefImpl的实例。

所以我们的计算属性就有两种形式了，一种是函数形式，一种是配置对象形式；

函数形式

import {computed, ref} from "vue";

let age = ref < number > (10);
// 函数形式
let myAge = computed < string > (() => `${age.value}岁`);

上面的代码中，只要我们改变age的值发生改变，就会触发computed重新计算myAge的值。

对象形式

<div>{{myAge}}</div>
<button @click="myAge=18">点我</button>

let age = ref < number > (10)
let myAge = computed < string > ({
    get() {
        return age.value + '岁'
    },
    set(newVal) {
        age.value = newVal
    }
})

我们可以使用对象形式来完成一些自定义的操作，比如说我们想要实现一个全选和全不选的功能，就可以使用对象形式，通过自定义getter和setter来实现。

当我们给计算属性allChecked赋值的时候，就会触发setter函数，然后遍历list数组，将每一项的checked属性改变，进而实现全选和全不选的功能。

除了上面这种用法，我们还可以给Computed属性传参，而实现思路其实也很简单，那就是，计算属性必须返回一个值，但是并没有限制返回值的类型是什么，因此我们可以返回一个带参的匿名函数，接着直接调用它，就可以实现计算属性传参了。