1，methods
不存在快取，執行一次執行一次，執行n次，執行n次。

2，computed
使用場景：當頁面中有某些資料依賴其他資料進行變動的時候，可以使用計算屬性。
計算屬性 computed 是基於data中資料進行處理的，data資料變化，他也跟著變化。當data中資料沒有發生改變時，我們呼叫computed中函式n次，只會進行快取（執行一次），每個計算屬性都包含兩個set、get 屬性

3，watch
使用場景：資料變化時執行非同步或開銷較大的操作，可以隨時修改狀態的變化。
watch:類似於監聽機制+事件機制。在大部分情況下我們都會使用computed，但如果要在資料變化的同時進行非同步操作或者是比較大的開銷，那麼watch為最佳選擇。watch為一個物件，鍵是需要觀察的表示式，值是對應回撥函式。值也可以是方法名，或者包含選項的物件。

// 這裡直接用 v-model 來繫結，不需要新增 change 事件
<input type="text" v-model="nameValue" style="margin-top:15px" />  {{tip}}
        

  data() {
    return {
      nameValue: "",
      tip: ""
    };
  },
  methods: {
    checkName(value) {
      var that = this;
      setTimeout(() => {
        if (value == "
 
admin") {
          that.tip = "使用者名稱已存在";
        } else {
          that.tip = "使用者名稱可以使用";
        }
      }, 2000);
    }
  },
  watch: {// 資料變化時執行非同步或開銷較大的操作
    nameValue(value) {
      this.checkName(value);
      this.tip = "正在驗證......";
    }
  }

watch的高階用法
上面的watch方法是當改變值時候，才會觸發監聽事件，但是我們想剛進入頁面時候，就觸發監聽事件，就要用handler()方法
handler()：當頁面剛進入時，自動繫結watch事件，不需要進行觸發

watch: {// 頁面載入時，就自動觸發此事件
  nameValue:{
    handler(new){
       this.checkName(value);
       this.tip = "正在驗證......";
    }
  }
}

immediate屬性：布林值
immediate：true：首次載入就監聽資料變化
immediate：false：只有發生改變才監聽

watch: {// 頁面載入時，就自動觸發此事件
  nameValue:{
    handler(new){
       this.checkName(value);
       this.tip = "正在驗證......";
    },
     immediate: true 
  }
}

deep:true；是開啟深層次的監聽，即所有屬性都加上監聽器，如果其中一個發生改變了就執行handler函式。

watch: {// 頁面載入時，就自動觸發此事件
  nameValue:{
    handler(new){
       this.checkName(value);
       this.tip = "正在驗證......";
    },
     immediate: true,
     deep:true
  }
}

來源：https://www.jianshu.com/p/a69a9bac9dc3
為了方便查，轉過來了。