vue3中的computed（计算属性）

概述：

        计算属性也是一个值（字符串、数字、对象等），只不过这个值是通过计算出来的

computed（计算属性）在vue3与vue2变化不大，都是简写形式（只读）与可读可写形式

 1. 简写形式（只读）

<script setup lang="ts">
   import { ref,computed } from 'vue'
   let firstName = ref('张');
   let lastName = ref('三');

   // 简写形式，只可读
   let fullname = computed(()=>{
       return `${firstName.value}--${lastName.value}`
    })

    console.log(fullname);  // 张--三

</script>

2. 可读可写

<script setup lang="ts">
   import { ref,computed } from 'vue'
   let firstName = ref('张');
   let lastName = ref('三');

    // 读：通过get方法；写：通过set方法，接收修改的值
   let fullname = computed({
      get(){
         return `${firstName.value}--${lastName.value}`
      },
      set(val){
         const [first,last] = val.split('-')
         firstName.value = first
         lastName.value = last
      }
   })
  
    let upFullname = ()=>{
        fullname.value = "李-四"
    }
    upFullname()
 
    console.log(fullname.value);  // 李四
</script>

3. computed有缓存，多次调用只执行一次

<script setup lang="ts">
   import { ref,computed } from 'vue'
   let firstName = ref('张');
   let lastName = ref('三');

   // 简写形式，并打印 123
   let fullname = computed(()=>{
       console.log(123);
       return `${firstName.value}--${lastName.value}`
    })

   // 多次调用，123只输出一次
   console.log(fullname.value);
   console.log(fullname.value);
   console.log(fullname.value);
   console.log(fullname.value);
   console.log(fullname.value);
 
</script>