Vue 中 computed 与 method 的差异

在 Vue.js 开发中，computed（计算属性）和 method（方法）是两个重要概念，理解它们之间的差异对于优化代码和提升开发效率至关重要。

从定义和语法层面来看，method 是 Vue 实例中的函数，通过在模板中以函数调用的形式使用，如 <div>{{ sayHello() }}</div>，在 script 中定义 sayHello() { return 'Hello!' }。而 computed 是一个计算属性，在模板里使用时就像普通数据属性一样，如 <div>{{ reversedMessage }}</div>，在 script 中定义为 computed: { reversedMessage() { return this.message.split('').reverse().join(''); } }。

在性能表现方面，method 每次被调用时都会执行函数内的代码。如果一个 method 内部逻辑复杂，且在模板中被频繁调用，会导致不必要的性能开销。而 computed 具有缓存机制，只有当它依赖的数据发生变化时才会重新计算。例如，一个 computed 属性依赖于一个 data 中的变量，只要这个变量不变，无论多少次访问该 computed 属性，都不会重新计算，大大提高了性能。

再从使用场景来说，method 适用于需要执行特定行为或有副作用的操作。比如发送网络请求、处理表单提交等。当点击一个按钮触发某个操作时，使用 method 来定义相应的处理函数是很合适的。computed 则更适合用于基于其他数据计算得出的属性。比如在一个电商应用中，根据商品数量和单价计算总价，总价就适合作为一个 computed 属性，因为它的值依赖于商品数量和单价，只有这两个值变化时总价才需要重新计算。

Vue 中的 computed 和 method 各有其独特的用途。开发过程中，合理地选择使用 computed 和 method，能够让代码更加清晰、高效，提升 Vue 应用的性能和可维护性。