X
XiaoSong
V1
2023/01/18阅读:16主题:默认主题
计算属性
基础示例
模板中
{{}}
写法虽然方便,但是写一些过于复杂的逻辑会显得臃肿并且可读性比较差。例如以下代码:
<script setup>
import { reactive } from 'vue'
const brand = reactive({
name: 'phone',
phone_brand: [
'Xiaomi',
'Redmi',
'apple'
]
})
</script>
根据brand是否已有某些品牌展示不同信息:
<p>
<!--如果模板里都这么写可读性会很差,代码不宜维护-->
{{ brand.phone_brand.length > 0 ? 'Yes' : 'No' }}
</p>
使用计算属性重构之后的代码:
<template>
<div>
<p>{{ Info }}</p>
</div>
</template>
<script setup>
import { computed, reactive } from 'vue'
const brand = reactive({
name: 'phone',
phone_brand: [
'Xiaomi',
'Redmi',
'apple'
]
})
const Info = computed(() => {
return brand.phone_brand.length > 0 ? 'Yes' : 'No'
})
</script>
注意
在重构之后的代码中我们定义了一个计算属性
Info
。computed()
接收一个getter
函数(带返回值的箭头函数),返回值为ref
。可以通过Info.value
访问计算结果。计算属性的ref
也会在模板中自动解包,无需带.value
。计算属性
Info
是响应式的。当brand.phone_brand
改变时,计算属性Info
也会改变。
下一期深入讲解计算属性的相关内容。
作者介绍
X
XiaoSong
V1