前言：
目标：现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下vue3中computed计算属性的使用。
什么是计算属性
computed函数在vue2中我们都了解过，当我们需要一个值，这个值随着其他值变化而变化，我们就将其放进computed中，computed是用来定义计算属性的。
模板当中的表达式虽然很方便，但也只能做简单的操作，如果在模板写太多逻辑，
但会让模板变得很臃肿，因此我们推荐使用计算属性来描述依赖响应式的复杂逻辑
选项式中的计算属性
<script> export default { data: () => ({ age: 19, }), // 计算属性 computed: { // 年龄 ageState() { if (this.age < 18) { return "未成年"; } else if (this.age >= 18 && this.age < 31) { return "青年"; } else if (this.age >= 31 && this.age < 50) { return "中年"; } else if (this.age >= 50) { return "老年"; } }, }, }; </script>
组合式中的计算属性
<script setup> import { ref, computed } from "@vue/reactivity"; let age = ref(19); // 计算属性：年龄阶段 let ageState = computed(() => { if (age.value < 18) { return "未成年"; } else if (age.value >= 18 && age.value < 31) { return "青年"; } else if (age.value >= 31 && age.value < 50) { return "中年"; } else if (age.value >= 50) { return "老年"; } }); </script>
计算属性和方法的区别：
- 两种方式在结果上是完全相同，不同之处在于计算属性值会基于其响应式依赖被缓存；
- 一个计算属性仅会在其响应式依赖更新时才会重新计算，具有惰性；
- 方法调用总是会在重新渲染时，再次执行函数；
计算属性/计算方法注意事项：
- 不要在计算属性/函数中做异步请求或者更改DOM
- 避免直接修改计算属性值
总结
以上就是 Vue3 中computed计算属性的使用。，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
