Vue2之computed VS methods

在Vue2中，computed 属性和 methods 方法都是用于处理数据的工具，但它们之间有一些重要的区别，主要区别在于缓存策略、使用场景以及调用方式上。

一、computed（计算属性）

• computed 属性用于声明计算属性，这些属性的值会根据其所依赖的数据的变化而自动更新。
• 它们类似于具有缓存的函数，只有在其依赖的响应式数据发生改变时才会重新计算值，否则会返回缓存的结果，这有助于提高性能。
• 适合用于依赖于其他数据的属性计算，如对数据进行过滤、排序、格式化等操作。

二、methods（方法）

• methods 方法用于定义在Vue实例中可调用的方法。
• 每当调用方法时，它们都会重新执行，不会像计算属性一样进行缓存。
• 适合用于需要在事件触发时执行的逻辑，或者需要传递参数的操作。

三、methods (方法) VS Computed Properties (计算属性) 区别

3.1、缓存策略：

• computed：具有缓存机制。当计算属性所依赖的数据发生变化时，Vue 会自动重新计算其值。而在依赖数据未变的情况下，多次访问计算属性会直接返回缓存的结果，无需重新计算。这种机制优化了性能，尤其适合处理复杂且频繁使用的计算逻辑。
• methods (方法)：没有缓存。每当触发组件重新渲染（如响应数据变化、事件触发等）时，调用方法总会执行其内部的函数逻辑。无论依赖数据是否改变，每次访问方法都需要重新计算。

3.2、使用场景：

• computed：适用于需要基于其它数据派生得出的值，且这些值在多次渲染期间可能保持不变的情况。计算属性特别适合处理那些需要根据多个数据源进行合并、过滤、格式化等操作的场景，尤其是当这些操作的结果会被频繁读取时。
• methods：更适合用于执行一次性、特定情境下的计算，或者需要在每次调用时都得到新结果的操作。例如，响应用户交互（如点击按钮）、触发特定逻辑（如发送网络请求）、执行副作用（如修改非响应式数据）等。由于没有缓存，方法更适合用于执行非纯函数（即有副作用或依赖外部状态）的计算

3.3、调用方式：

• computed：在模板中使用时如同访问一个普通的属性，无需添加括号。例如：{{ computedProperty }} 或 <div :class="computedClass">。
• methods：在模板中需要作为函数调用，带有括号。例如：{{ methodName() }} 或 <button @click="methodName">Click me</button>。

3.4、可读写性：

• computed ：不仅可以定义为只读属性（仅提供 get 函数），还可以定义为可读写属性，通过添加 set 函数来设定计算属性的赋值逻辑。当外部尝试修改计算属性时，会触发 set 函数。
• methods：本质上是函数，只能通过调用执行，不具备属性那样的读写特性。

总结，需要一个根据其他数据自动更新的值，你应该使用 computed 属性。而如果你需要执行一些逻辑或者操作，并且每次都希望得到最新的结果，那么你应该使用 methods 方法。