【Vue3】computed计算属性的使用

---

computed简介

使用场景：模版中有逻辑代码，可以使用计算属性进行维护。同时，计算属性也有缓存效果，可以监听数值是否发生改变，改变了，才能出发重新计算。这也是为什么有些逻辑代码使用计算属性，有些使用普通方法
代码展示:

<template>
    <div class="itemStyle">
          <div>
              名称:<span>
              {{handleTestComputed}}
          </span>
          </div>
    </div>
</template>

<script setup lang="ts" name="item">
    import {ref,reactive,toRefs,toRef,computed} from "vue"
    let firstName = ref('abc')
    let lastName = ref('def')

    const handleTestComputed = computed(()=>{
        return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+" "+lastName.value.slice(0,1).toUpperCase()+lastName.value.slice(1)
    })
</script>

特别注意：默认情况计算属性是只读。如果想要修改计算属性的结果值,需要通过同时提供 getter 和 setter 来创建。如下:

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('张')
const lastName = ref('大王')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>