计算属性在vue3中和vue2的思想概念都是一样，唯一区别就是在使用组合式api时候的语法稍有不同。
使用步骤：
- 导入computed函数
import {computed} from 'vue'
- 使用computed函数
<script setup>
import {computed, ref} from "vue";
const arr = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
// 使用computed函数包装并返回计算属性的值
const arrDouble = computed(() => {
// 返回arr每项值double后的数组
return arr.value.map(item => item * 2)
})
/**
* 和vue2一样，computed计算属性默认只是get获取，如果在特殊场景，比如：全选的时候可以使用set。
可以看回vue2的一个小案例：https://www.wolai.com/8CGg1wzH7tpySSXM9TVTs3#bb3hLYDtLoC3Bwbet3Kba5
*/
const isAllChecked = computed({
get(){
return arr.value.every(item=>item>1)
},
set(value){
console.log(value);
}
</script>
<template>
<div>
<p>arr: {{ arr }}</p>
<p>arrDouble: {{ arrDouble }}</p>
</div>
</template>
