Vue3计算属性深度解析：经典场景与Vue2对比

一、计算属性的核心价值

计算属性（Computed Properties）是Vue响应式系统的核心特性之一，它通过依赖追踪和缓存机制优雅地解决模板中复杂逻辑的问题。当我们需要基于现有响应式数据进行派生计算时，计算属性总能保持高效的性能表现。

二、Vue3计算属性新特性

1. 组合式API写法

import { ref, computed } from 'vue'const price = ref(99)
const quantity = ref(2)// Vue3计算属性
const total = computed(() => price.value * quantity.value)

2. 类型推导增强

在TypeScript项目中能自动推断类型，提升开发体验：

// 自动推断为ComputedRef<number>
const discountTotal = computed(() => total.value * 0.8)

3. 调试支持

开发模式下可通过onTrack和onTrigger进行调试：

const debugTotal = computed(() => total.value, {onTrack(e) {console.log('依赖被追踪', e)},onTrigger(e) {console.log('依赖触发更新', e)}
})

三、经典场景案例

场景1：表单验证

<script setup>
const form = reactive({username: '',email: ''
})const isValid = computed(() => {return (form.username.length >= 3 &&/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
})
</script><template><button :disabled="!isValid">提交</button>
</template>

场景2：购物车统计

const cartItems = ref([{ name: '商品A', price: 100, quantity: 2 },{ name: '商品B', price: 200, quantity: 1 }
])const totalAmount = computed(() => {return cartItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
})

场景3：数据过滤

const searchKeyword = ref('')
const products = ref([...])const filteredProducts = computed(() => {return products.value.filter(product => product.name.includes(searchKeyword.value))
})

四、Vue2 vs Vue3 对比分析

特性	Vue2	Vue3
声明位置	computed选项	组合式API中任意位置
TypeScript支持	需要额外类型声明	原生类型推断
代码组织	选项式API	逻辑关注点集中
调试能力	无内置支持	提供调试钩子
可组合性	Mixins/插件	自定义组合函数

五、最佳实践建议

缓存优势：优先使用计算属性处理模板中的复杂表达式
纯函数原则：避免在计算属性内产生副作用
性能优化：拆分复杂计算为多个属性提升可维护性
只读特性：需要写入时使用v-model+计算属性的setter

// Setter示例
const fullName = computed({get() {return `${firstName.value} ${lastName.value}`},set(val) {[firstName.value, lastName.value] = val.split(' ')}
})