前端框架Vue中methods,computed,watch的呼叫時機的理解
最近在學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>
上面的理解,來源於程式碼執行情況的測試和總結,或有不周到之處,還望讀者見諒。