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。
---------------------
作者:Generon
來源:CSDN
原文:https://blog.csdn.net/generon/article/details/79752414
版權聲明:本文為博主原創文章,轉載請附上博文鏈接!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM