Vue3 computed 属性（实战指南）

Vue3 computed 属性解析

Vue 3.0 中的 computed 属性是用于处理响应式数据的计算属性，其本质是基于响应式系统优化的带记忆的函数。相比 methods 方法，computed 会缓存结果，避免重复计算，特别适合处理依赖其他响应式变量的场景。

核心概念

computed 属性通过 computed() 函数创建，返回一个始终返回最新值的响应式引用。
类比：它就像一个带有自动记忆功能的计算器，只有当依赖的变量发生变化时，才会重新计算结果。
价值：解决模板中复杂逻辑难以维护、重复计算性能差的问题，实现数据逻辑的复用与优化。

基础语法

基本使用

import { computed, ref } from 'vue'
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
console.log(doubleCount.value) // 输出 0
count.value = 1
console.log(doubleCount.value) // 输出 2，自动更新

传参与返回多个值

const price = ref(100)
const discount = ref(0.9)
const finalPrice = computed(() => {
  // 根据价格和折扣率计算最终价格
  return price.value * discount.value
})

进阶特性

依赖响应式系统

特性	说明	示例
自动追踪依赖	computed 会自动识别并追踪依赖的响应式变量	修改 `price.value` 会触发重新计算
缓存机制	依赖未变化时直接返回缓存值	频繁访问 `finalPrice.value` 不会重复计算
可读性增强	用命名方式明确依赖关系	比模板中的复杂表达式更易维护

与 methods 的区别

computed 属性	methods 方法
依赖变化时自动更新	每次页面渲染都会重新执行
有缓存机制	无缓存，重复计算
适合复杂计算逻辑	适合简单事件处理

实战应用

场景 1：购物车总价计算

const items = ref([{ name: '手机', price: 899, quantity: 2 }, { name: '耳机', price: 199, quantity: 3 }])
const totalPrice = computed(() => {
  return items.value.reduce((sum, item) => {
    // 累加每个商品的总价
    return sum + (item.price * item.quantity)
  }, 0)
})

场景 2：表单验证状态同步

const username = ref('')
const password = ref('')
const isValid = computed(() => {
  // 同时校验用户名和密码长度
  return username.value.length >= 4 && password.value.length >= 6
})

注意事项

误用 set/get：computed 默认只读，若需修改需显式定义 set

const count = ref(0)
const computedCount = computed({
  get: () => count.value * 2,
  set: (val) => { count.value = val / 2 } // 设置值时自动拆解
})

过度计算：避免在 computed 中执行高开销操作（如 API 请求）
替代方案：改用 watch 或 watchEffect 处理副作用
未更新依赖：修改非响应式变量不会触发 computed 重新计算
解决方案：确保所有依赖项都使用 ref/reactive 包装

总结

Vue3 computed 属性通过响应式依赖追踪和缓存机制，为开发提供了高效处理复杂计算的标准化方案。