前端框架Vue中methods,computed,watch的調用時機的理解

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

1.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>