目录
- 前言：
- 什么是计算属性
- 选项式中的计算属性
- 组合式中的计算属性
- 计算属性和方法的区别：
- 计算属性/计算方法注意事项：
- 总结
前言：
目标：现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下vue3中computed计算属性的使用。
我正在参加 2022年「博客之星」年度总评选，请大家帮我支持一下，给我一个五星。
|
点击前往我的评选页面：
|
大家只要按图给我五星即可，谢谢大家的帮助。
什么是计算属性
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
- 避免直接修改计算属性值
总结
最后还请大家帮我点击一下，谢谢大家的帮助
我正在参加 2022年「博客之星」年度总评选，请大家帮我支持一下，给我一个五星。
|
点击前往我的评选页面：
|
大家只要按图给我五星即可，谢谢大家的帮助。
以上就是 Vue3 中computed计算属性的使用。，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog
