最近在學Vue框架的 時候對methods,computed不甚理解，看了幾篇別人寫的部落格感覺描述的也很模糊，故而在稍微明白他們之間主要差異的時候，寫篇部落格記錄分享一下。

methods中定義的函式，其呼叫時機是：當頁面引用了vue data關鍵字的屬性，並且這些屬性發生改變的時候，就會執行methods中定義的函式，並且不管methods中定義的函式是否依賴了data關鍵字中的屬性，methods中定義的函式都會被執行。methods中定義的函式能像普通函式那樣，當主動呼叫methods中定義的函式的時候，這些函式每次呼叫都會執行。

 2.computed中定義的函式，在computed中定義的函式的呼叫時機是：當頁面引用了vue data關鍵字的屬性，並且這些屬性發生改變的時候，如果computed中定義的函式也依賴了這些改變的屬性，那麼computed中定義的函式才會被執行。也就是computed中定義的函式被Vue框架回調的條件是，1.函式內依賴了vue的屬性，2.這些屬性發生了改變，3.這些屬性被頁面引用。這三個條件同時滿足，才會觸發computed中定義的某個函式的回撥。而且和methods定義的函式，其呼叫語法也是不一樣的，computed中定義的函式，呼叫的時候後面不能有小括號，類似屬性的呼叫。

         並不是每次主動呼叫computed中定義的函式都會執行，computed中定義的函式即使是主動呼叫，其是否會執行也和內部的依賴屬性是否發生改變有關。

3.watch中定義的方法是用來監聽某個屬性發生變化的時候，觸發回撥。在watch中定義方法的時候，方法的鍵必須是vue中已經定義的屬性。

new Vue({
  el: "#app",
  data: {
   num: 1,
   num2: 2,
   value3: 88
   
  },
  methods: {
     getNum:function(){ //每次更新頁面的時候就會執行
           alert("methods");
           return "現在的num：";
     }
  },
   computed: {
      getNum2:function(){ //第一次執行，後面當依賴的屬性發生改變的時候執行
      alert("computed");
        return "num2："+ this.num2;
     }
  },
  watch: {
   value3: function(value){  //value3是已經在data中定義的屬性，value是該屬性發生改變的時候的值
    alert(" 現在的value："+ value);
   }
  }
})
 

<div id="app">
<p>{{num}}</p>
<p>{{getNum()}}</p>

<button v-on:click="num++">Num++</button>
<button v-on:click="num--">Num--</button>
<button v-on:click="num2++">Num2++</button>
<button v-on:click="value3++">value3++</button>
</div>
 

上面的理解，來源於程式碼執行情況的測試和總結，或有不周到之處，還望讀者見諒。