1. computed

• computed 即计算属性，会根据所依赖的数据动态显示新的计算结果。
• 它不需要调用（即后面不用加圆括号）即可使用。
• 计算属性会根据依赖来自动缓存，如果依赖不变， computed 的值就不会重新计算。

示例代码

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('')
    }
  }
})

结果：
我是原始值: "Hello"
我是计算属性的值: "olleH"

2. watch

• watch 即监听/侦听，是一个对象，键是 data 对应的数据，值是对应的回调函数。
• 值也可以是方法名，或包含选项的对象，当 data 的数据发生变化时，就会执行这个回调函数。
• watch 有两个参数，一个 Val（修改后的 data 数据），一个 oldVal（原来的 data 数据）。
• Vue 实例会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

示例代码

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += 'hi'">obj.a + 'hi'</button>
      <button @click="obj = {a:'a'}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 变了")
    },
      deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深
    },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 变了")
    },
      immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
    }
  }
}).$mount("#app");

watch 有2个属性：immediate 和 deep

• immediate 表示是否在第一次渲染时执行这个函数，对应的值为（ true / false ）。
• deep 表示如果我们监听一个对象，是否需要监听对象里面属性的变化，对应的值为（ true / false ）。
• 注意应该使用箭头函数来定义 watch 函数，因为箭头函数没有 this ，它的 this 会继承它上面的函数，所以箭头函数的 this 指向了 window.this 而不是 Vue 实例。

vm.$watch() 的用法和 watch 回调类似

• vm.$watch('data 属性名', fn, {deep: true / false, immediate: true / false})

示例

vm.$watch("n", function(val, newVal){
     console.log("n 变了");
},{deep: true, immediate: true})

总结

• 如果数据要通过复杂计算得出结果，就使用 computed 。
• 如果数据需要被监听并对其进行一些操作就使用 watch 。
• watch 可以执行异步代码，而 computed 不行。