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

VUE3入门很简单（2）--- 计算属性

news 来源：原创 2025/6/27 10:39:42

前言

重要提示：文章只适合初学者，不适合专家！！！

为什么需要计算属性？

想象你在开发一个购物车功能。当用户选择商品时，你需要：

计算商品总价
根据折扣码调整价格
自动更新免运费状态
显示税费金额

你会怎么做？在模板中写表达式？

<!-- 反例：模板中复杂逻辑 -->
<p>总价：￥{{ (items.reduce((sum, item) => sum + item.price * item.quantity, 0) * (1 - discountRate)) }}
</p>
<p v-if="(items.reduce((sum, item) => sum + item.price * item.quantity, 0) * (1 - discountRate)) > 100">已免运费
</p>

这种写法存在三个严重问题：

重复代码：相同逻辑在多个地方重复
难以维护：业务逻辑分散在模板中
性能浪费：每次渲染都重新计算

这就是计算属性的用武之地！

计算属性是什么？

计算属性是Vue的智能数据处理器：

它能根据其他响应式数据自动计算新值
会缓存计算结果，避免重复计算
在模板中使用像普通属性一样简单
代码集中管理，易于维护

计算属性使用五步法

第一步：从vue引入computed

// 1. 必须先从vue中引入computed
import { ref, computed } from 'vue'

第二步：定义响应式数据

// 2. 创建响应式基础数据
const price = ref(100)  // 商品单价
const quantity = ref(2) // 购买数量

第三步：创建计算属性

// 3. 使用computed()函数创建计算属性
const subtotal = computed(() => {// 简单的计算逻辑：单价 × 数量return price.value * quantity.value
})

第四步：创建更复杂的计算属性

// 4. 可创建依赖其他计算属性的计算属性
const discountRate = ref(0.2) // 折扣率20%const total = computed(() => {// 打折后金额：小计 × (1 - 折扣率)return subtotal.value * (1 - discountRate.value)
})

第五步：在模板中使用

<template><div class="cart"><!-- 直接像普通数据一样使用计算属性 --><p>单价: ￥{{ price }}</p><p>数量: {{ quantity }}</p><p>小计: ￥{{ subtotal }}</p><p>折扣率: {{ discountRate * 100 }}%</p><!-- 使用计算结果自动更新 --><p class="total">实付: ￥{{ total }}</p></div>
</template>

使用计算属性的改进方案

<script setup>
import { reactive, computed } from 'vue'const cart = reactive({items: [{ id: 1, name: 'Vue教程', price: 99, quantity: 2 },{ id: 2, name: 'React手册', price: 89, quantity: 1 }],discountRate: 0.1 // 10%折扣
})// 1. 计算总价（未打折）
const subtotal = computed(() => {return cart.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
})// 2. 计算最终价格（打折后）
const total = computed(() => {return subtotal.value * (1 - cart.discountRate)
})// 3. 判断是否免运费
const freeShipping = computed(() => {return total.value > 100
})// 4. 计算税费（复杂规则）
const tax = computed(() => {if (freeShipping.value) {return total.value * 0.08 // 免运费税率8%}return total.value * 0.1 // 普通税率10%
})
</script><template><div><p>商品小计：￥{{ subtotal }}</p><p>折扣后价格：￥{{ total }}</p><p v-if="freeShipping">🎉 已免运费！</p><p>税费：￥{{ tax }}</p></div>
</template>

计算属性的优势

1. 自动依赖追踪与缓存

const a = ref(10)
const b = ref(20)// 每次访问都会执行计算
function regularSum() {console.log('函数执行')return a.value + b.value
}// 只有依赖变更时才重新计算
const computedSum = computed(() => {console.log('计算属性执行')return a.value + b.value
})

测试结果：

console.log(computedSum.value) // "计算属性执行" → 30
console.log(computedSum.value) // 无打印 → 从缓存返回30a.value = 15 // 更新依赖console.log(computedSum.value) // "计算属性执行" → 35
console.log(computedSum.value) // 无打印 → 从缓存返回35

2. 复杂逻辑封装

// 封装复杂的产品过滤逻辑
const filteredProducts = computed(() => {return products.value.filter(p => p.stock > 0) // 过滤有库存的.filter(p => p.price <= maxPrice.value) // 价格筛选.sort((a, b) => { // 排序if (sortBy.value === 'price') {return a.price - b.price}return a.name.localeCompare(b.name)})
})

常见问题与解决方案

问题1：计算属性不更新

原因：依赖项没有正确响应式

const obj = { count: 0 }// ❌ 错误 - 原始对象不是响应式
const doubled = computed(() => obj.count * 2) // ✅ 正确 - 使用reactive包装
const reactiveObj = reactive({ count: 0 })
const doubled = computed(() => reactiveObj.count * 2)

问题2：何时使用计算属性 vs 方法

场景	选择	原因
依赖响应式数据的计算	计算属性	自动缓存优化性能
数据转换或格式化	计算属性	更清晰的模板语法
需要参数的运算	方法	计算属性不接受参数
事件处理	方法	与事件配合使用
一次性的复杂运算	方法	避免不必要的响应式依赖