1. 程式人生 > >vue開發computed,watch,method執行的先後順序

vue開發computed,watch,method執行的先後順序

1#computed:計算屬性將被混入到 Vue 例項中。所有 getter 和 setter 的 this 上下文自動地繫結為 Vue 例項。

2#methods:methods 將被混入到 Vue 例項中。可以直接通過 VM 例項訪問這些方法,或者在指令表示式中使用。方法中的 this 自動繫結為 Vue 例項。

3#watch:是一種更通用的方式來觀察和響應 Vue 例項上的資料變動。一個物件,鍵是需要觀察的表示式,值是對應回撥函式。值也可以是方法名,或者包含選項的物件。Vue 例項將會在例項化時呼叫 $watch(),遍歷 watch 物件的每一個屬性。

通俗來講,

computed是在HTML DOM載入後馬上執行的,如賦值;

methods則必須要有一定的觸發條件才能執行,如點選事件;

watch呢?它用於觀察Vue例項上的資料變動。對應一個物件,鍵是觀察表示式,值是對應回撥。值也可以是方法名,或者是物件,包含選項。

所以他們的執行順序為:預設載入的時候先computed再watch,不執行methods;等觸發某一事件後,則是:先methods再watch。

下面的例子可以做為說明。

computed 屬性 vs watched 屬性:Vue 確實提供了一種更通用的方式來觀察和響應 Vue 例項上的資料變動:watch 屬性。當你有一些資料需要隨著其它資料變動而變動時,你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而,通常更好的想法是使用 computed 屬性而不是命令式的 watch 回撥。

所以他們的執行順序為:預設載入的時候先computed再watch,不執行methods;等觸發某一事件後,則是:先methods再watch。