---

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({// getterget() {return firstName.value + ' ' + lastName.value},// setterset(newValue) {// 注意：我们这里使用的是解构赋值语法[firstName.value, lastName.value] = newValue.split(' ')}
})
</script>

✨$踩坑不易，还希望各位大佬支持一下$

📃 $个人主页：$ 沉默小管

📃 $个人网站：$ 沉默小管

📃 $个人导航网站：$ 沉默小管导航网

📃 $我的开源项目：$ vueCms.cn

🔥 $技术交流QQ群：837051545$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教