vue2中 watch和computed的区别

计算属性（Computed）：

1. computed 是基于依赖关系进行缓存的。只有当相关的响应式依赖发生改变时，才会重新求值。适合于执行更复杂的数据操作。
2. computed 属性是计算出来的，不会对原始数据造成任何副作用。
3. computed 属性可以具有 setter 和 getter 方法，可以更灵活地控制数据的操作。

侦听器（Watch）：

1. watch 是用于观察和响应 Vue 实例上的数据变化的一种方法。在数据变化时执行异步或开销较大的操作时，watch 是一个很好的选择。
2. watch 允许执行任何异步或开销较大的操作，而无需担心性能问题，因为它只会在数据实际发生变化时执行。
3. watch 可以用来观察全局数据或组件内的数据。

分别举例子说明一下

• computed：

假设有一个计算属性，用于将两个数字相加并返回结果：

new Vue({  
  el: '#app',  
  data: {  
    num1: 1,  
    num2: 2  
  },  
  computed: {  
    sum: function () {  
      return this.num1 + this.num2;  
    }  
  }  
});

在这个例子中，sum 是一个计算属性。当 num1 或 num2 发生变化时，sum 会自动重新计算并返回新的结果。

• watch：

假设我们有一个侦听器，用于在某个数据变化时执行异步操作：

new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!'  
  },  
  watch: {  
    message: function (newVal, oldVal) {  
      // 这是一个异步操作，用于处理新的消息值  
      setTimeout(() => {  
        console.log('Message changed from ' + oldVal + ' to ' + newVal);  
      }, 1000);  
    }  
  }  
});

在这个例子中，有一个侦听器监视 message 数据的变化。当 message 发生变化时，侦听器会异步地打印出新的消息值。注意，使用了 setTimeout 来模拟异步操作。

总结：

• 如果需要基于其他响应式数据执行复杂的计算操作，并且这些操作应该被缓存（只在相关数据发生变化时重新计算），那么你应该使用 computed。
• 如果需要观察和响应 Vue 实例上的数据变化，并且这些操作是异步或开销较大的，那么你应该使用 watch。