vue中計算屬性computed和watch的區別

methods、watch、computed都是以函數爲基礎的，但各自卻都不同。
1、methods 不存在緩存，執行一次運行一次，執行n次，運行n次。
2、computed 使用場景：當頁面中有某些數據依賴其他數據進行變動的時候，可以使用計算屬性；計算屬性 computed 是基於data中數據進行處理的，data數據變化，他也跟着變化；
當data中數據沒有發生改變時，我們調用computed中函數n次，只會執行一次，其餘緩存。每個計算屬性都包含兩個set、get 屬性。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

計算屬性默認只有 getter，不過在需要時你也可以提供一個 setter：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[1]
    }
  }
}

現在再運行 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新。
3、watch 數據變化時執行異步或開銷較大的操作，可以隨時修改狀態的變化。

watch: {
    // 如果 `question` 發生改變，這個函數就會運行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },

`_.debounce` 函數 (及其近親 `_.throttle`) 的知識，請參考：https://lodash.com/docs#debounce
handler()：當頁面剛進入時，自動綁定watch事件，不需要進行觸發

watch: {// 頁面加載時，就自動觸發此事件
  stu :{
    handler(new){
       this.checkName(value);
       this.tip = "正在驗證......";
    },
     immediate: true, // 代表在wacth裏聲明瞭firstName這個方法之後立即先去執行handler方法
     deep:true // 意味着開啓深度監聽，對象 stu 裏面有任何數據變化都會觸發handler函數
  }
}

參考：https://cn.vuejs.org/v2/guide/computed.html
https://www.jianshu.com/p/a69a9bac9dc3