Vue 3 计算属性详解：选项式与组合式实战

组合式 API 写法

Composition API 更灵活，配合 ref 和 computed 使用。

<script setup>
import { computed, ref } from 'vue'
let age = ref(20)
// 计算属性：年龄阶段
let ageState = computed(() => {
  if (age.value < 18) {
    return '未成年'
  } else if (age.value < 35) {
    return '青年'
  } else if (age.value < 50) {
    return '中年'
  } else {
    return '老年'
  }
})
let birthday = ref('')
// 计算属性：星座
let constellation = computed(() => {
  let birArr = birthday.value.split('-')
  let month = parseInt(birArr[1])
  let day = parseInt(birArr[2])
  switch (month) {
    case 1:
      if (day <= 19) return '魔羯座'
      else return '水平座'
    case 2:
      if (day <= 18) return '水平座'
      else return '双鱼座'
    case 3:
      if (day <= 20) return '双鱼座'
      else return '白羊座'
    case 4:
      if (day <= 19) return '白羊座'
      else return '金牛座'
    case 5:
      if (day <= 20) return '金牛座'
      else return '双子座'
    case 6:
      if (day <= 21) return '双子座'
      else return '巨蟹座'
    case 7:
      if (day <= 22) return '巨蟹座'
      else return '狮子座'
    case 8:
      if (day <= 22) return '狮子座'
      else return '处女座'
    case 9:
      if (day <= 22) return '处女座'
      else return '天秤座'
    case 10:
      if (day <= 23) return '天秤座'
      else return '天蝎座'
    case 11:
      if (day <= 22) return '天蝎座'
      else return '射手座'
    case 12:
      if (day <= 21) return '射手座'
      else return '魔羯座'
    default:
      return '请选择日期'
  }
})
</script>
<template>
  <div>
    年龄：<input type="number" v-model.lazy="age">
    <h3>年龄阶段（简单）：{{ age < 18 ? '未成年' : '成年' }}</h3>
    <h3>年龄阶段（复杂）：{{ ageState }}</h3>
  </div>
  <hr>
  <div>
    生日：<input type="date" v-model="birthday">
    <h3>星座：{{ constellation }}</h3>
  </div>
</template>

计算属性 vs 方法

两种方式结果相同，核心区别在于缓存机制。

• 计算属性：基于响应式依赖被缓存。仅当依赖更新时才重新计算。只要数据源不变，多次访问直接返回缓存结果，不重复执行 getter。
• 方法调用：每次重新渲染时都会再次执行函数。

实际开发中，如果涉及大量运算或 DOM 操作，用计算属性能显著减少不必要的开销。

使用时的注意事项

1. 不要做异步请求或修改 DOM：计算函数应该是纯函数，副作用会破坏响应式系统的可预测性。
2. 避免直接修改返回值：计算属性是只读的，试图修改它不会报错但也不会生效，反而可能引发逻辑混乱。

合理运用计算属性，能让你的组件逻辑更清晰，性能也更可控。