前言 🌟
刚接触Vue.js时，你是否也纠结过computed和methods的区别？它们都能“计算结果”，但背后的逻辑却大不相同！
基本概念与语法 📚
1. 计算属性（computed）🔢
作用：封装复杂的数据处理逻辑，返回一个计算结果。
特点：依赖数据变化时自动更新，且缓存计算结果。
// Vue实例中定义计算属性
new Vue({
data() {
return { price: 100, quantity: 2 };
},
computed: {
totalPrice() {
console.log("[computed] 计算总价..."); // 依赖变化时才会执行
return this.price * this.quantity;
}
}
});
调用方式：像属性一样直接使用，无需括号！
<p>总价：{{ totalPrice }}</p> <!-- 直接调用 -->
2. 方法（methods）🛠️
作用：定义需要主动触发的业务逻辑。
特点：每次调用都会重新执行函数。
// Vue实例中定义方法
new Vue({
data() {
return { price: 100, quantity: 2 };
},
methods: {
calculateTotal() {
console.log("[methods] 计算总价..."); // 每次调用都执行
return this.price * this.quantity;
}
}
});
调用方式：必须加括号调用！
<p>总价：{{ calculateTotal() }}</p> <!-- 必须加括号 -->
核心区别：缓存机制 ⚡
1. 计算属性的缓存特性 🧠
- 依赖不变时：直接返回缓存结果，不重复计算。
- 依赖变化时：自动重新计算并更新缓存。
代码验证：
<template>
<div>
<p>计算属性调用1：{{ totalPrice }}</p>
<p>计算属性调用2：{{ totalPrice }}</p>
<p>方法调用1：{{ calculateTotal() }}</p>
<p>方法调用2：{{ calculateTotal() }}</p>
</div>
</template>
控制台输出：
[computed] 计算总价... // 只执行一次！🚀
[methods] 计算总价... // 每次调用都执行！⏳
[methods] 计算总价...
2. 方法的无缓存特性 🔄
无论依赖数据是否变化，每次调用都会重新执行函数体。
适用场景：需要实时计算或响应事件的场景（如点击按钮）。
使用场景对比 🎯
何时用计算属性？ 📊
- 场景1：依赖多个数据的复杂计算（如购物车总价）。
- 场景2：需要高效渲染列表（如过滤后的数据）。
computed: {
filteredProducts() {
// 仅当products或搜索关键词变化时重新计算
return this.products.filter(item => item.name.includes(this.searchKey));
}
}
何时用方法？ 🎮
- 场景1：事件处理（如按钮点击提交表单）。
- 场景2：需要传递参数的逻辑（如动态计算折扣）。
<button @click="submitOrder">提交订单</button>
methods: {
submitOrder() {
// 发送网络请求...
},
applyDiscount(discount) {
return this.price * (1 - discount); // 需要参数时用方法
}
}
总结对比表 📌
| 特性 | computed | methods |
|---|---|---|
| 调用方式 | 属性调用（{{ totalPrice }}） | 方法调用（{{ calculateTotal() }}） |
| 缓存 | ✅ 依赖不变时缓存结果 | ❌ 每次调用重新计算 |
| 依赖追踪 | 自动追踪依赖并更新 | 需手动触发 |
| 适用场景 | 数据衍生、复杂计算 | 事件处理、需要参数 |
进阶思考 💡
问题：如果计算属性A依赖计算属性B，它们的缓存如何更新？
答：Vue的依赖追踪是链式的！
- 当B的依赖变化 → B重新计算 → A的依赖（B）变化 → A也重新计算！
- 缓存机制依然有效，避免不必要的重复计算。
结语 🚀
理解computed和methods的区别，是写出高效Vue代码的关键！记住：
- 计算属性：用于“数据的衍生”，依赖不变时用缓存。
- 方法：用于“主动触发的动作”，每次都要最新结果。
希望此篇能够让你在Vue的学习路上少走弯路！🎉
