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 版權聲明：本文爲博主原創文章，轉載請附上博文連接！