Vuejs中關於computed、methods、watch的區別。

Vue.js在模板表達式中限制了,綁定表達式最多隻能有一條表達式,但某些數據須要一條以上的表達式運算實現,此時就能夠將此數據放在計算屬性(computed)當中。函數

Vuejs中關於computed、methods、watch的區別。this

1#computed:計算屬性將被混入到 Vue 實例中。全部 getter 和 setter 的 this 上下文自動地綁定爲 Vue 實例。對象

2#methods:methods 將被混入到 Vue 實例中。能夠直接經過 VM 實例訪問這些方法,或者在指令表達式中使用。方法中的 this 自動綁定爲 Vue 實例。事件

3#watch:是一種更通用的方式來觀察和響應 Vue 實例上的數據變更。一個對象,鍵是須要觀察的表達式,值是對應回調函數。值也能夠是方法名,或者包含選項的對象。Vue 實例將會在實例化時調用 $watch(),遍歷 watch 對象的每個屬性。get

通俗來說:回調函數

  1. computed是在HTML DOM加載後立刻執行的,模板

  2. 如賦值;而methods則必需要有必定的觸發條件才能執行,如點擊事件;ejs

  3. watch呢?它用於觀察Vue實例上的數據變更。對應一個對象,鍵是觀察表達式,值是對應回調。值也能夠是方法名,或者是對象,包含選項。遍歷

因此他們的執行順序爲:默認加載的時候先computed再watch,不執行methods;等觸發某一事件後,則是:先methods再watch。方法

下面的例子能夠作爲說明。

computed 屬性 vs watched 屬性:Vue 確實提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變更:watch 屬性。當你有一些數據須要隨着其它數據變更而變更時,你很容易濫用 watch——特別是若是你以前使用過 AngularJS。然而,一般更好的想法是使用 computed 屬性而不是命令式的 watch 回調。

相關文章
相關標籤/搜索