vue3中computed计算属性和方法的区别-开发者社区

在 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`（方法）
主要用途	基于已有数据计算派生值	执行事件或动作，如按钮点击、表单提交
缓存机制	有缓存，只在依赖变化时重新计算	无缓存，每次调用都会重新执行
响应式	响应式的，自动跟踪依赖的变化	不响应式，手动调用时触发执行
执行时机	被访问时才执行	每次调用时都会执行
副作用	不应有副作用，通常是纯计算	可以包含副作用，如发送请求、修改状态等
性能	性能更优，适合需要缓存的计算	性能较差，频繁调用时可能影响性能