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