Vue3 computed 计算属性使用教程

Vue3 的 computed 计算属性是构建高效、可维护响应式逻辑的核心工具——它不仅能基于响应式数据（如购物车商品列表）自动派生出缓存的衍生值（如实时总价），还能智能追踪深层依赖、支持多级计算链（如叠加优惠券、运费和满减规则），相比 methods（无缓存、重复执行）和手动维护的 ref（易遗漏、难维护），它让代码更简洁、可靠且性能更优；无论你是实现基础汇总还是复杂业务逻辑，computed 都能以声明式、零副作用的方式帮你精准响应数据变化。

Vue3 的 computed 计算属性，核心作用是基于响应式数据派生出新的、可响应的值，且具备缓存机制——只要依赖的数据没变，多次访问不会重复执行函数。购物车金额自动汇总正是它的典型应用场景。

为什么用 computed 而不是 methods 或普通 ref？

购物车总价需要实时响应商品数量、单价的变化。如果用 methods，每次模板中调用都会重新执行；如果用普通 ref，需手动监听所有变化并更新，极易遗漏或出错。而 computed 自动追踪依赖、按需更新、结果可缓存，代码更简洁可靠。

基础写法：从简单数组开始

假设购物车是一个商品对象数组，每个商品含 price（单价）和 count（数量）：

const cartItems = ref([
  { id: 1, name: '苹果', price: 5.5, count: 2 },
  { id: 2, name: '牛奶', price: 12.0, count: 1 },
  { id: 3, name: '面包', price: 8.5, count: 3 }
])
<p>const totalPrice = computed(() => {
return cartItems.value.reduce((sum, item) => {
return sum + item.price * item.count
}, 0)
})</p>

模板中直接使用：{{ totalPrice }}，它会随 cartItems 中任意 price 或 count 变化而自动更新。

进阶技巧：处理深层响应性与异步场景

注意：Vue3 默认只对 ref、reactive 的顶层属性做响应式追踪。如果商品对象来自 reactive，且你修改了 item.count（如 item.count++），computed 依然能正确响应，因为 reactive 对象内部属性变更也会触发依赖更新。

但若你替换整个 cartItems 数组（如 cartItems.value = newArray），computed 同样会响应——因为它依赖的是 cartItems.value 这个响应式引用本身。

常见误区提醒：

• 不要在 computed 函数里做副作用（如发请求、改 DOM），它只用于计算和返回值
• 避免在 computed 中直接修改响应式数据，否则可能引发循环更新
• 如需格式化（如保留两位小数），可在 computed 内部处理：return Number(sum.toFixed(2))

实战扩展：带折扣与运费的完整逻辑

真实购物车常含优惠券、满减、运费等规则。computed 可组合多个逻辑：

const couponDiscount = ref(5.0)
const shippingFee = ref(8.0)
const isFreeShipping = computed(() => totalPrice.value >= 99)
<p>const finalPrice = computed(() => {
const discount = Math.min(couponDiscount.value, totalPrice.value)
const fee = isFreeShipping.value ? 0 : shippingFee.value
return Number((totalPrice.value - discount + fee).toFixed(2))
})</p>

这里 finalPrice 同时依赖 totalPrice（自身是 computed）、couponDiscount、shippingFee 和 isFreeShipping（另一个 computed），Vue 会自动建立完整的响应链。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~