VUE中computed 、created 、mounted的先后順序說明
更新時(shí)間：2023年03月24日 09:23:06 作者：吃炸雞的前端
這篇文章主要介紹了VUE中computed 、created 、mounted的先后順序說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
computed 、created 、mounted先后順序
1.computed 、created 、mounted 的先后順序
- created => computed => mounted
2.父子組件生命周期執(zhí)行順序?
- 頁(yè)面初始化時(shí)： 父beforeCreate -> 父created -> 父beforeMount ->子beforeCreate -> 子created ->
- 子beforeMount -> 子mounted-> 父mounted
- 頁(yè)面銷毀時(shí)： 父beforeDestroy -> 子beforeDestroy ->子destroyed->父 destroyed
- 銷毀時(shí)也是子組件要先于父組件銷毀
3.頁(yè)面跳轉(zhuǎn)的生命周期執(zhí)行順序
- 舊頁(yè)面跳轉(zhuǎn)到新頁(yè)面： 新頁(yè)面created > 新beforeMount > 舊beforeDestroy > 舊：destroyed > 新mounted
4.computed 、watch、created 、mounted 的先后順序
- immediate 為false時(shí)： created => computed => mounted => watch
- immediate 為true時(shí)： watch =>created=> computed => mounted
mounted和created在頁(yè)面加載過程只執(zhí)行一次，computed和watch是用來監(jiān)聽值發(fā)生變化的
VUE中的mounted和created在頁(yè)面加載過程只執(zhí)行一次，computed和watch是用來監(jiān)聽值發(fā)生變化的
今天在做項(xiàng)目的時(shí)候，發(fā)現(xiàn)重新打開頁(yè)面，傳給子組件的值，會(huì)被監(jiān)聽到，但是在打開頁(yè)面之后，再做操作就會(huì)發(fā)現(xiàn)監(jiān)聽不到里面的值。后來把值的監(jiān)聽放到watch方法中，終于監(jiān)聽到了。
后來去官網(wǎng)進(jìn)行查詢，重新熟悉了一下VUE的生命周期
發(fā)現(xiàn)
VUE中的mounted和created在頁(yè)面加載過程只執(zhí)行一次，computed和watch是用來監(jiān)聽值發(fā)生變化的
長(zhǎng)個(gè)記性
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0+ 從插件開發(fā)到npm發(fā)布的示例代碼
這篇文章主要介紹了vue2.0+ 從插件開發(fā)到npm發(fā)布的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
Vue.js通常運(yùn)行在瀏覽器環(huán)境,而瀏覽器不允許直接與MySQL數(shù)據(jù)庫(kù)進(jìn)行連接,本文主要介紹了vue實(shí)現(xiàn)直連mysql的方法步驟,感興趣的可以了解一下2024-11-11
這篇文章主要介紹了Vue中父子組件的值傳遞與方法傳遞，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Element?Plus?去掉表格外邊框的實(shí)現(xiàn)代碼
使用el-table組件拖拽時(shí),?想使用自定義樣式進(jìn)行拖拽,?想去掉外邊框,?并在表頭加入豎杠樣式,本文給大家介紹Element?Plus?去掉表格外邊框的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2025-04-04
下面小編就為大家分享一篇基于IView中on-change屬性的使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue如何解決el-select下拉框顯示ID不顯示label問題
這篇文章主要介紹了vue如何解決el-select下拉框顯示ID不顯示label問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
適用于 Vue 的播放器組件Vue-Video-Player操作
這篇文章主要介紹了適用于 Vue 的播放器組件Vue-Video-Player操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
關(guān)于Element-UI可編輯表格的實(shí)現(xiàn)過程
這篇文章主要介紹了關(guān)于Element-UI可編輯表格的實(shí)現(xiàn)過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
本篇文章主要介紹了使用 async-validator 編寫 Form 組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
詳解基于Vue的支持?jǐn)?shù)據(jù)雙向綁定的select組件
這篇文章主要介紹了詳解基于Vue的支持?jǐn)?shù)據(jù)雙向綁定的select組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09