Vue 中的计算属性（computed）-平芜编程栈

Vue 中的计算属性（computed）

概述

计算属性是 Vue 中一个强大的特性，用于声明式地处理响应式数据的复杂逻辑。它基于 Vue 实例的响应式数据进行计算，并缓存计算结果，只有在依赖的响应式数据发生变化时才会重新计算。

基本用法

1. 定义计算属性

newVue({data(){return{firstName:'张',lastName:'三',quantity:2,price:100}},computed:{// 基本语法 - 计算属性的 getterfullName(){returnthis.firstName+' '+this.lastName},// 依赖多个数据源totalPrice(){returnthis.quantity*this.price}}})

2. 在模板中使用

<template><div><p>姓名：{{ fullName }}</p><p>总价：{{ totalPrice }}</p></div></template>

主要特性

1.缓存机制

计算属性会缓存计算结果，只有当依赖的响应式数据发生变化时才会重新计算。

computed:{// 这个计算属性会缓存结果now(){returnDate.now()// ❌ 错误示例：实际上不会更新，因为不依赖响应式数据},// 正确示例：依赖响应式数据reversedMessage(){returnthis.message.split('').reverse().join('')}}

2.Getter 和 Setter

计算属性默认只有 getter，但也可以提供 setter。

computed:{fullName:{// getterget(){returnthis.firstName+' '+this.lastName},// setterset(newValue){constnames=newValue.split(' ')this.firstName=names[0]this.lastName=names[names.length-1]}}}// 使用 setterthis.fullName='李 四'// 会自动更新 firstName 和 lastName

与方法的区别

计算属性 vs 方法

// 计算属性computed:{computedNow(){returnthis.message+' '+Date.now()// 只有当 message 变化时才会重新计算}}// 方法methods:{methodNow(){returnthis.message+' '+Date.now()// 每次调用都会重新计算}}

主要区别：

计算属性有缓存，方法没有
计算属性基于响应式依赖，方法不自动追踪依赖
计算属性在模板中像属性一样使用，方法需要加括号调用

与侦听器（watch）的区别

适用场景对比

// 使用计算属性 - 适合同步计算computed:{fullName(){returnthis.firstName+' '+this.lastName}}// 使用侦听器 - 适合异步操作或副作用watch:{firstName(newVal,oldVal){// 执行异步操作或复杂逻辑this.fetchUserData(newVal)}}

实际应用示例

示例1：购物车计算

newVue({data(){return{cartItems:[{name:'商品A',price:100,quantity:2},{name:'商品B',price:200,quantity:1},{name:'商品C',price:50,quantity:3}]}},computed:{// 计算总价totalPrice(){returnthis.cartItems.reduce((sum,item)=>{returnsum+(item.price*item.quantity)},0)},// 计算商品总数totalItems(){returnthis.cartItems.reduce((sum,item)=>{returnsum+item.quantity},0)},// 是否有折扣资格（总价超过500）hasDiscount(){returnthis.totalPrice>500},// 折后价格finalPrice(){returnthis.hasDiscount?this.totalPrice*0.9:this.totalPrice}}})

示例2：列表过滤和排序

newVue({data(){return{products:[{name:'手机',price:2999,category:'电子产品'},{name:'衣服',price:299,category:'服装'},{name:'电脑',price:5999,category:'电子产品'},{name:'鞋子',price:399,category:'服装'}],selectedCategory:'',sortBy:'price',sortOrder:'asc'}},computed:{// 过滤产品filteredProducts(){if(!this.selectedCategory)returnthis.productsreturnthis.products.filter(product=>product.category===this.selectedCategory)},// 排序产品sortedProducts(){return[...this.filteredProducts].sort((a,b)=>{letresult=0if(a[this.sortBy]<b[this.sortBy])result=-1if(a[this.sortBy]>b[this.sortBy])result=1returnthis.sortOrder==='asc'?result:-result})},// 价格统计priceStats(){constprices=this.filteredProducts.map(p=>p.price)return{min:Math.min(...prices),max:Math.max(...prices),average:prices.reduce((a,b)=>a+b,0)/prices.length}}}})

最佳实践

1.保持纯函数

计算属性的 getter 应该是纯函数，不要有副作用。

// ✅ 正确computed:{validItems(){returnthis.items.filter(item=>item.isValid)}}// ❌ 避免computed:{processItems(){this.items.forEach(item=>{item.processed=true// 副作用！})returnthis.items}}

2.避免复杂计算

如果计算过于复杂，考虑拆分成多个计算属性或使用方法。

3.命名清晰

使用描述性的名称，反映计算属性的用途。

// ✅ 清晰computed:{isFormValid(){/* ... */},formattedDate(){/* ... */}}// ❌ 不清晰computed:{check(){/* ... */},format(){/* ... */}}

Vue 3 中的计算属性

在 Vue 3 的组合式 API 中：

import{ref,computed}from'vue'exportdefault{setup(){constfirstName=ref('张')constlastName=ref('三')// 只读计算属性constfullName=computed(()=>{returnfirstName.value+' '+lastName.value})// 可写计算属性constwritableFullName=computed({get:()=>firstName.value+' '+lastName.value,set:(newValue)=>{const[first,last]=newValue.split(' ')firstName.value=first lastName.value=last}})return{fullName,writableFullName}}}