基础示例

模板中 {{}} 写法虽然方便，但是写一些过于复杂的逻辑会显得臃肿并且可读性比较差。例如以下代码:

<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也会改变。

下一期深入讲解计算属性的相关内容。