组合式api-计算属性computed的使用

计算属性在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>