在 Vue 3 中，computed计算属性和方法（method）虽然看起来有一些相似，因为它们都可以用来获取数据或执行某些操作，但它们有着本质的区别。下面是它们之间的具体差异：
1.用途
computed：
计算属性用于“基于已有的数据计算并返回一个衍生值”。它是用于处理依赖于其他响应式数据的计算，通常用于展示数据的处理、格式化、过滤、合并等。方法（method）：
方法是普通的函数，可以用来处理事件响应或触发某些动作，例如按钮点击、表单提交等。方法通常用于需要“触发”的场景，并且每次调用时都执行一次。
2.响应式
computed：
计算属性是响应式的，它会基于它所依赖的响应式数据进行自动计算和更新。只有在它依赖的数据发生变化时，计算属性才会重新计算，否则会使用缓存的结果。方法（method）：
方法本身并不具备响应式功能。每次调用时，它都会执行一次，不会缓存结果，且不会自动依赖于响应式数据的变化。
3.缓存机制
computed：
计算属性具有缓存功能。只要计算属性的依赖没有发生变化，它就会返回缓存的结果，而不会重新计算。这意味着计算属性是懒执行的，只有在需要时才会计算。方法（method）：
方法没有缓存机制，每次调用时都会执行一遍，不会保存之前的结果。每次访问方法时，都会重新执行其内部的逻辑。
4.执行时机
computed：
计算属性是在被访问时懒执行的。当计算属性被访问时，它会立即计算并返回值。如果计算属性依赖的数据没有变化，那么它会返回缓存的结果，不会重新计算。方法（method）：
方法在每次调用时都会立即执行。无论依赖的状态是否变化，方法都会被重新执行。
5.用法
computed：
通常用于“基于已有数据进行计算”并作为“只读属性”提供给模板或其他代码使用。import { computed, ref } from 'vue'; export default { setup() { const price = ref(100); const tax = ref(0.1); const totalPrice = computed(() => { return price.value * (1 + tax.value); }); return { price, tax, totalPrice }; } }在模板中，你可以直接访问
totalPrice，而无需手动调用。方法（method）：
方法通常用于响应用户事件或执行“动作”，例如按钮点击后执行某个函数。export default { setup() { const counter = ref(0); const increment = () => { counter.value++; }; return { counter, increment }; } }在模板中，你可以将
increment绑定到按钮的点击事件中：<button @click="increment">Increment</button> <p>{{ counter }}</p>
6.性能
computed：
计算属性具有缓存机制，因此对于需要反复计算的数据，它比方法更高效。只有在依赖的数据变化时，它才会重新计算。方法（method）：
方法没有缓存机制，每次调用时都会重新执行，因此在需要频繁调用的情况下，性能可能不如computed。
7.副作用
computed：
计算属性一般用于纯计算，不应有副作用。它的作用是返回一个计算结果，而不是执行某些操作（如发请求、修改其他数据等）。方法（method）：
方法通常可以包含副作用，如发送请求、修改外部状态、执行动画等。方法通常是在某些事件发生时被调用。
总结
| 特性 | computed（计算属性） | method（方法） |
|---|---|---|
| 主要用途 | 基于已有数据计算派生值 | 执行事件或动作，如按钮点击、表单提交 |
| 缓存机制 | 有缓存，只在依赖变化时重新计算 | 无缓存，每次调用都会重新执行 |
| 响应式 | 响应式的，自动跟踪依赖的变化 | 不响应式，手动调用时触发执行 |
| 执行时机 | 被访问时才执行 | 每次调用时都会执行 |
| 副作用 | 不应有副作用，通常是纯计算 | 可以包含副作用，如发送请求、修改状态等 |
| 性能 | 性能更优，适合需要缓存的计算 | 性能较差，频繁调用时可能影响性能 |
什么时候使用computed，什么时候使用method：
computed：当你需要根据其他响应式数据计算一个新值并在模板中展示时，使用computed。method：当你需要响应用户的交互事件（如点击按钮、提交表单等），或者执行某个特定动作时，使用方法。
这样，可以根据需求来选择是用computed还是用方法，确保代码的清晰和性能的最优化。
