当前位置：首页 > news >正文

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

news 来源：原创 2025/5/31 19:36:51

一、计算属性的核心价值

计算属性（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(' ')
  }
})