计算属性和方法有什么区别？怎样选择

计算属性和方法（Methods）在Vue.js中都是用于处理数据和逻辑的工具，但它们之间存在一些关键的区别，这决定了在不同场景下如何选择使用它们。

计算属性（Computed Properties）

1. 缓存性：计算属性是基于它们的响应式依赖进行缓存的。只要依赖的响应式数据没有发生改变，多次访问计算属性会立即返回之前缓存的结果，而不会重新执行计算逻辑。这可以大大提高性能，尤其是在处理大量或复杂的计算时。

2. 响应式：计算属性是响应式的，这意味着当它们依赖的数据发生变化时，计算属性会自动更新。

3. 调用方式：计算属性在模板中作为属性直接访问，无需调用函数。

方法（Methods）

1. 无缓存：方法每次调用时都会执行相应的逻辑，不会缓存结果。这意味着即使多次调用方法且参数相同，方法也会重新执行计算。

2. 非响应式：方法本身不是响应式的，它们不会根据依赖的数据变化而自动更新。但是，方法内部可以访问响应式数据，并且当这些数据变化时，方法的结果也会相应变化（但方法本身不会被Vue追踪其依赖）。

3. 调用方式：方法在模板中需要通过事件触发或直接调用，且需要像调用普通函数一样加上括号。

如何选择

• 当需要基于响应式数据进行计算，并且希望计算结果能够缓存以提高性能时，应该使用计算属性。例如，当你需要根据用户输入动态计算一个复杂表达式的值时，计算属性是一个很好的选择。

• 当需要执行一些不会基于响应式数据重复计算的逻辑时，应该使用方法。例如，当你需要处理用户点击事件、发起网络请求或执行其他非计算性任务时，应该使用方法。

• 如果某个逻辑既可以用计算属性也可以用方法实现，但计算属性更加简洁且易于理解时，也应该优先考虑使用计算属性。

总的来说，计算属性和方法各有其适用场景。在选择时，应根据具体需求和性能考虑来决定使用哪种方式。对于需要缓存和响应式更新的计算逻辑，使用计算属性；对于非计算性任务或需要重复执行的逻辑，使用方法。