天天看點

vue關于computed/created/methods/watch

computed:計算屬性将被混入到 Vue 執行個體中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 執行個體。

methods:将被混入到 Vue 執行個體中。可以直接通過 VM 執行個體通路這些方法,或者在指令表達式中使用。方法中的 this 自動綁定為 Vue 執行個體。

watch:是一種更通用的方式來觀察和響應 Vue 執行個體上的資料變動。一個對象,鍵是需要觀察的表達式,值是對應回調函數。值也可以是方法名,或者包含選項的對象。Vue 執行個體将會在執行個體化時調用 $watch(),周遊 watch 對象的每一個屬性。

更加通俗的講:

computed是在HTML DOM加載後馬上執行的,如指派;

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

watch呢?它用于觀察Vue執行個體上的資料變動。對應一個對象,鍵是觀察表達式,值是對應回調。值也可以是方法名,或者是對象,包含選項。

是以他們的執行順序為:

預設加載的時候先computed再created再watch,不執行methods;

等觸發某一事件後,則是:先methods再watch。

computed 屬性 vs watched 屬性:Vue 确實提供了一種更通用的方式來觀察和響應 Vue 執行個體上的資料變動:watch 屬性。當你有一些資料需要随着其它資料變動而變動時,你很容易濫用 watch——特别是如果你之前使用過 AngularJS。然而,通常更好的想法是使用 computed 屬性而不是指令式的 watch 回調。