VUE computed与watch的区别

computed是计算属性，它会根据你所依赖的数据动态显示新的计算结果，而且他的计算属性是基于它们的依赖进行缓存的，只有当相关依赖发生改变时才会重新求值，这也就意味当data中message的值未发生改变时，每次访问computedMessage（对message 进行加工的处理函数） 计算属性会立即返回之前的计算结果，而不必再次执行函数，支持缓存，不支持异步

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  template: `
  <div>
  <p>我是原始值: "{{ message }}"</p>
  <p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用
  </div>
  `,
  computed: {
    // 计算属性的 getter
    computedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性如果依赖不变的话，它就会变成缓存，computed 的值就不会重新计算
所以，如果数据要通过复杂逻辑来得出结果，那么就推荐使用计算属性

watch是一个对象，键是data对应的数据，Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性，支持异步，不支持缓存

注意点：不应该使用箭头函数来定义 watch 函数，因为箭头函数没有 this，它的 this 会继承它的父级函数，但是它的父级函数是 window，导致箭头函数的 this 指向 window，而不是 Vue 实例
deep 控制是否要看这个对象里面的属性变化
immediate 控制是否在第一次渲染是执行这个函数

如果一个数据需要经过复杂计算就用 computed
如果一个数据需要被监听并且对数据做一些操作就用 watch