vue——computed和methods的区别

computed和methods在Vue.js中都是用于处理数据和逻辑的方法，但它们之间存在一些重要的区别。

缓存机制：computed属性是基于它们的依赖进行缓存的。只有当它的相关依赖发生改变时才会重新计算。这意味着只要计算属性依赖的响应式属性没有发生变化，多次访问计算属性会立即返回之前缓存的结果，而不会重新执行计算逻辑。相比之下，methods中的函数在每次调用时都会执行，无论其依赖的数据是否发生变化。

调用方式：computed属性像访问数据属性一样被调用，你不需要在它们后面加括号。而methods定义的函数必须通过加括号以函数调用的方式执行。

可读写的属性：在computed中，你可以定义一个函数作为属性，也可以定义get/set函数来创建可读写的属性。然而，在methods中，你只能定义函数，无法定义具有get/set功能的属性。

性能：由于computed属性具有缓存功能，当数据没有改变时，它们不会重新计算，这可以提高性能。相比之下，methods中的函数每次调用都会执行，可能会导致不必要的重复计算，特别是在数据没有改变的情况下。

响应式：computed属性是响应式的，当它们的依赖发生变化时，它们会自动更新。而methods中的函数不是响应式的，它们只是普通的函数，不会因为依赖的变化而自动更新。

总的来说，computed和methods的主要区别在于它们的缓存机制、调用方式、可读写的属性、性能和响应式特性。在选择使用computed还是methods时，你应该根据你的具体需求来决定。如果你需要基于依赖进行缓存，并且希望属性像数据属性一样被访问，那么你应该使用computed。如果你只是需要定义一个函数，并且每次调用时都希望执行该函数，那么你应该使用methods。

<template>  
  <div>  
    <p>Computed Property: {{ computedMessage }}</p>  
    <p>Methods: {{ methodMessage() }}</p>  
    <button @click="increaseCount">Increase Count</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      count: 0,  
      message: 'Hello from data'  
    };  
  },  
  computed: {  
    computedMessage() {  
      // 返回计算后的值，基于data中的count  
      return `Count is: ${this.count}`;  
    }  
  },  
  methods: {  
    methodMessage() {  
      // 每次调用时返回当前message的值  
      return this.message;  
    },  
    increaseCount() {  
      // 增加count的值  
      this.count++;  
    }  
  }  
};  
</script>