一文搞懂computed和watch：Vue中的响应式双胞胎

在Vue中，computed和watch是两个非常重要的概念，它们可以帮助我们管理和响应Vue实例中数据的变化。

1. computed:

计算属性是Vue中的一个重要概念，它们是基于响应式依赖进行缓存的。只在相关响应式依赖发生变化时，它们才会重新求值。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
})

在这个例子中，reversedMessage是一个计算属性，它的值依赖于message。当message改变时，reversedMessage的值会自动更新。

2. watch:

与计算属性不同，watch用于观察Vue实例上的数据变动，当数据变化时，watcher会执行一些操作。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  },
  watch: {
    message: function(newValue, oldValue) {
      console.log(`message changed from ${oldValue} to ${newValue}`);
    }
  }
})

在这个例子中，我们对message数据进行了监控，当message的值发生变化时，会执行一个函数，打印出新旧值的变化。

总结：computed适合对一些依赖于其他数据的变化而产生的数据进行缓存，而watch更适合执行一些异步操作或者是执行一些更复杂的操作。