詳解vue中屬性執(zhí)行順序
vue中屬性的執(zhí)行順序
在Vue 2中,組件的生命周期和數(shù)據(jù)綁定的執(zhí)行順序如下:
data
:首先,組件會調(diào)用data
函數(shù),該函數(shù)返回一個對象,該對象的屬性和方法會被分配給組件的$data
。init
:接下來,組件會調(diào)用init
函數(shù),該函數(shù)用于初始化組件。created
:然后,組件會調(diào)用created
函數(shù),該函數(shù)用于在組件被創(chuàng)建后執(zhí)行某些操作。mounted
:接著,組件會調(diào)用mounted
函數(shù),該函數(shù)用于在組件被掛載到DOM后執(zhí)行某些操作。updated
:當(dāng)組件的數(shù)據(jù)更新時,組件會調(diào)用updated
函數(shù),該函數(shù)用于在組件更新后執(zhí)行某些操作。ready
:最后,組件會調(diào)用ready
函數(shù),該函數(shù)用于在組件被渲染并且準(zhǔn)備好后執(zhí)行某些操作。
至于props和watch,它們不是生命周期函數(shù),而是特殊的屬性。props是父組件傳遞給子組件的屬性,而watch用于觀察和響應(yīng)數(shù)據(jù)的變化。
至于methods,它們只是普通的JavaScript函數(shù),可以在組件的任何地方定義。當(dāng)需要使用方法時,只需要直接調(diào)用即可。方法不遵循任何特定的執(zhí)行順序。
總的來說,執(zhí)行順序是:
data
init
created
mounted
updated
ready
同時,props和watch可以在任何階段使用,而methods可以在任何階段定義和使用。
綜上,選項的執(zhí)行順序是 props -> data -> computed -> watch -> created -> mounted -> methods。
vue中的屬性執(zhí)行順序 props -> data -> computed -> watch -> created -> mounted -> methods
在 Vue 2 中,這些選項的執(zhí)行順序是:
- 1. props :父組件傳遞給子組件的屬性會首先被處理。
- 2. data :在處理完 props 之后,Vue 會處理數(shù)據(jù)對象中的所有屬性,并將它們添加到 Vue 實例中。
- 3. computed :計算屬性會在處理完 data 之后被計算,并添加到 Vue 實例中。
- 4. watch :偵聽器會在 computed 之后被處理,并添加到 Vue 實例中。
- 5. created :在處理完所有選項后,Vue 實例會調(diào)用 created 鉤子,并完成實例化。
- 6. mounted :在實例掛載到DOM元素之后,Vue 實例會調(diào)用 mounted 鉤子。
- 7. methods :實例方法會在 mounted 之后被處理,并添加到 Vue 實例中。
綜上,選項的執(zhí)行順序是 props -> data -> computed -> watch -> created -> mounted -> methods。
這樣的話,其實父組件給子組件傳遞一個比較全面的info對象就可以,子組件就可以在computed或者后續(xù)步驟中使用這些數(shù)據(jù),進(jìn)而制造出自己想要的數(shù)據(jù):省去了組附件組裝,然后再傳遞給子組件的步驟
到此這篇關(guān)于vue中屬性執(zhí)行順序的文章就介紹到這了,更多相關(guān)vue屬性執(zhí)行順序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue使用jsMind思維導(dǎo)圖的實戰(zhàn)指南
jsMind是一個顯示/編輯思維導(dǎo)圖的純javascript類庫,其基于 html5的canvas進(jìn)行設(shè)計,這篇文章主要給大家介紹了關(guān)于vue使用jsMind思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下2023-01-01在vue中實現(xiàn)iframe嵌套Html頁面及注意事項說明
這篇文章主要介紹了在vue中實現(xiàn)iframe嵌套Html頁面及注意事項說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10