前言
重要提示：文章只适合初学者，不适合专家！！！
为什么需要计算属性？
想象你在开发一个购物车功能。当用户选择商品时，你需要：
- 计算商品总价
- 根据折扣码调整价格
- 自动更新免运费状态
- 显示税费金额
你会怎么做？在模板中写表达式？
<!-- 反例：模板中复杂逻辑 -->
<p>总价：￥{{ (items.reduce((sum, item) => sum + item.price * item.quantity, 0) * (1 - discountRate)) }}
</p>
<p v-if="(items.reduce((sum, item) => sum + item.price * item.quantity, 0) * (1 - discountRate)) > 100">已免运费
</p>
这种写法存在三个严重问题：
- 重复代码：相同逻辑在多个地方重复
- 难以维护：业务逻辑分散在模板中
- 性能浪费：每次渲染都重新计算
这就是计算属性的用武之地！
计算属性是什么？
计算属性是Vue的智能数据处理器：
- 它能根据其他响应式数据自动计算新值
- 会缓存计算结果，避免重复计算
- 在模板中使用像普通属性一样简单
- 代码集中管理，易于维护
计算属性使用五步法
第一步：从vue引入computed
// 1. 必须先从vue中引入computed
import { ref, computed } from 'vue'
第二步：定义响应式数据
// 2. 创建响应式基础数据
const price = ref(100) // 商品单价
const quantity = ref(2) // 购买数量
第三步：创建计算属性
// 3. 使用computed()函数创建计算属性
const subtotal = computed(() => {// 简单的计算逻辑：单价 × 数量return price.value * quantity.value
})
第四步：创建更复杂的计算属性
// 4. 可创建依赖其他计算属性的计算属性
const discountRate = ref(0.2) // 折扣率20%const total = computed(() => {// 打折后金额：小计 × (1 - 折扣率)return subtotal.value * (1 - discountRate.value)
})
第五步：在模板中使用
<template><div class="cart"><!-- 直接像普通数据一样使用计算属性 --><p>单价: ￥{{ price }}</p><p>数量: {{ quantity }}</p><p>小计: ￥{{ subtotal }}</p><p>折扣率: {{ discountRate * 100 }}%</p><!-- 使用计算结果自动更新 --><p class="total">实付: ￥{{ total }}</p></div>
</template>
使用计算属性的改进方案
<script setup>
import { reactive, computed } from 'vue'const cart = reactive({items: [{ id: 1, name: 'Vue教程', price: 99, quantity: 2 },{ id: 2, name: 'React手册', price: 89, quantity: 1 }],discountRate: 0.1 // 10%折扣
})// 1. 计算总价（未打折）
const subtotal = computed(() => {return cart.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
})// 2. 计算最终价格（打折后）
const total = computed(() => {return subtotal.value * (1 - cart.discountRate)
})// 3. 判断是否免运费
const freeShipping = computed(() => {return total.value > 100
})// 4. 计算税费（复杂规则）
const tax = computed(() => {if (freeShipping.value) {return total.value * 0.08 // 免运费税率8%}return total.value * 0.1 // 普通税率10%
})
</script><template><div><p>商品小计：￥{{ subtotal }}</p><p>折扣后价格：￥{{ total }}</p><p v-if="freeShipping">🎉 已免运费！</p><p>税费：￥{{ tax }}</p></div>
</template>
计算属性的优势
1. 自动依赖追踪与缓存
const a = ref(10)
const b = ref(20)// 每次访问都会执行计算
function regularSum() {console.log('函数执行')return a.value + b.value
}// 只有依赖变更时才重新计算
const computedSum = computed(() => {console.log('计算属性执行')return a.value + b.value
})
测试结果：
console.log(computedSum.value) // "计算属性执行" → 30
console.log(computedSum.value) // 无打印 → 从缓存返回30a.value = 15 // 更新依赖console.log(computedSum.value) // "计算属性执行" → 35
console.log(computedSum.value) // 无打印 → 从缓存返回35
2. 复杂逻辑封装
// 封装复杂的产品过滤逻辑
const filteredProducts = computed(() => {return products.value.filter(p => p.stock > 0) // 过滤有库存的.filter(p => p.price <= maxPrice.value) // 价格筛选.sort((a, b) => { // 排序if (sortBy.value === 'price') {return a.price - b.price}return a.name.localeCompare(b.name)})
})
常见问题与解决方案
问题1：计算属性不更新
原因：依赖项没有正确响应式
const obj = { count: 0 }// ❌ 错误 - 原始对象不是响应式
const doubled = computed(() => obj.count * 2) // ✅ 正确 - 使用reactive包装
const reactiveObj = reactive({ count: 0 })
const doubled = computed(() => reactiveObj.count * 2)
问题2：何时使用计算属性 vs 方法
| 场景 | 选择 | 原因 |
|---|---|---|
| 依赖响应式数据的计算 | 计算属性 | 自动缓存优化性能 |
| 数据转换或格式化 | 计算属性 | 更清晰的模板语法 |
| 需要参数的运算 | 方法 | 计算属性不接受参数 |
| 事件处理 | 方法 | 与事件配合使用 |
| 一次性的复杂运算 | 方法 | 避免不必要的响应式依赖 |
总结：何时使用计算属性？
在以下场景优先选择计算属性：
- 数据依赖计算：当需要基于其他响应式数据计算新值
- 模板格式化：需要格式化显示的数据
- 性能优化：避免重复执行高开销操作
- 代码组织：集中管理逻辑，提高可读性
记住计算属性的核心价值：
“计算属性不是普通的函数，而是具有智能缓存功能的响应式数据处理器”
)
