快捷導(dǎo)航

詳解vue中屬性執(zhí)行順序

更新時(shí)間：2023年09月08日 09:00:11 作者：發(fā)漸稀

這篇文章主要介紹了vue中屬性執(zhí)行順序,選項(xiàng)的執(zhí)行順序是 props -> data -> computed -> watch -> created -> mounted -> methods，具體詳細(xì)內(nèi)容本文給大家講解的非常詳細(xì)，需要的朋友可以參考下

vue中屬性的執(zhí)行順序

在Vue 2中，組件的生命周期和數(shù)據(jù)綁定的執(zhí)行順序如下：

data ：首先，組件會(huì)調(diào)用 data 函數(shù)，該函數(shù)返回一個(gè)對(duì)象，該對(duì)象的屬性和方法會(huì)被分配給組件的 $data 。
init ：接下來(lái)，組件會(huì)調(diào)用 init 函數(shù)，該函數(shù)用于初始化組件。
created ：然后，組件會(huì)調(diào)用 created 函數(shù)，該函數(shù)用于在組件被創(chuàng)建后執(zhí)行某些操作。
mounted ：接著，組件會(huì)調(diào)用 mounted 函數(shù)，該函數(shù)用于在組件被掛載到DOM后執(zhí)行某些操作。
updated ：當(dāng)組件的數(shù)據(jù)更新時(shí)，組件會(huì)調(diào)用 updated 函數(shù)，該函數(shù)用于在組件更新后執(zhí)行某些操作。
ready ：最后，組件會(huì)調(diào)用 ready 函數(shù)，該函數(shù)用于在組件被渲染并且準(zhǔn)備好后執(zhí)行某些操作。

至于props和watch，它們不是生命周期函數(shù)，而是特殊的屬性。props是父組件傳遞給子組件的屬性，而watch用于觀察和響應(yīng)數(shù)據(jù)的變化。

至于methods，它們只是普通的JavaScript函數(shù)，可以在組件的任何地方定義。當(dāng)需要使用方法時(shí)，只需要直接調(diào)用即可。方法不遵循任何特定的執(zhí)行順序。

總的來(lái)說(shuō)，執(zhí)行順序是：

data
init
created
mounted
updated
ready

同時(shí)，props和watch可以在任何階段使用，而methods可以在任何階段定義和使用。

綜上，選項(xiàng)的執(zhí)行順序是 props -> data -> computed -> watch -> created -> mounted -> methods。

vue中的屬性執(zhí)行順序 props -＞ data -＞ computed -＞ watch -＞ created -＞ mounted -＞ methods

在 Vue 2 中，這些選項(xiàng)的執(zhí)行順序是：

1. props ：父組件傳遞給子組件的屬性會(huì)首先被處理。
2. data ：在處理完 props 之后，Vue 會(huì)處理數(shù)據(jù)對(duì)象中的所有屬性，并將它們添加到 Vue 實(shí)例中。
3. computed ：計(jì)算屬性會(huì)在處理完 data 之后被計(jì)算，并添加到 Vue 實(shí)例中。
4. watch ：偵聽(tīng)器會(huì)在 computed 之后被處理，并添加到 Vue 實(shí)例中。
5. created ：在處理完所有選項(xiàng)后，Vue 實(shí)例會(huì)調(diào)用 created 鉤子，并完成實(shí)例化。
6. mounted ：在實(shí)例掛載到DOM元素之后，Vue 實(shí)例會(huì)調(diào)用 mounted 鉤子。
7. methods ：實(shí)例方法會(huì)在 mounted 之后被處理，并添加到 Vue 實(shí)例中。

綜上，選項(xiàng)的執(zhí)行順序是 props -> data -> computed -> watch -> created -> mounted -> methods。