Vue Computed 和 Watch 的区别与运用场景

Vue.js 中的 computed 和 watch 主要用于响应数据的变化，并进行相应的操作。

1. computed: 当依赖的数据变化时，计算属性会重新计算。适用于一些需要依赖其他数据且不会改变的值。

new Vue({
  el: '#app',
  data: {
    message: 'Hello',
    name: 'Vue.js'
  },
  computed: {
    // 计算属性的 getter
    computedMessage: function () {
      // `this` 指向 vm 实例
      return this.message + ' ' + this.name
    }
  }
})

2. watch: 更适用于当数据变化时，需要执行异步操作或者开销较大的操作。

new Vue({
  el: '#app',
  data: {
    message: 'Hello',
  },
  watch: {
    // 每当 `message` 变化时，这个函数就会运行
    message: function (newValue, oldValue) {
      // 这里可以进行更复杂的操作
      this.doSomething();
    }
  },
  methods: {
    doSomething: function() {
      console.log(this.message);
    }
  }
})

computed 是基于它的依赖进行缓存的，只有在相关依赖发生变化时，才会重新计算。而 watch 则是提供了一个更通用的方法，来观察和响应数据的变化。