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í)行順序?
- 頁面初始化時(shí)： 父beforeCreate -> 父created -> 父beforeMount ->子beforeCreate -> 子created ->
- 子beforeMount -> 子mounted-> 父mounted
- 頁面銷毀時(shí)： 父beforeDestroy -> 子beforeDestroy ->子destroyed->父 destroyed
- 銷毀時(shí)也是子組件要先于父組件銷毀
3.頁面跳轉(zhuǎn)的生命周期執(zhí)行順序
- 舊頁面跳轉(zhuǎn)到新頁面： 新頁面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在頁面加載過程只執(zhí)行一次，computed和watch是用來監(jiān)聽值發(fā)生變化的
VUE中的mounted和created在頁面加載過程只執(zhí)行一次，computed和watch是用來監(jiān)聽值發(fā)生變化的
今天在做項(xiàng)目的時(shí)候，發(fā)現(xiàn)重新打開頁面，傳給子組件的值，會(huì)被監(jiān)聽到，但是在打開頁面之后，再做操作就會(huì)發(fā)現(xiàn)監(jiān)聽不到里面的值。后來把值的監(jiān)聽放到watch方法中，終于監(jiān)聽到了。
后來去官網(wǎng)進(jìn)行查詢，重新熟悉了一下VUE的生命周期
發(fā)現(xiàn)
VUE中的mounted和created在頁面加載過程只執(zhí)行一次，computed和watch是用來監(jiān)聽值發(fā)生變化的
長(zhǎng)個(gè)記性
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VsCode新建VueJs項(xiàng)目的詳細(xì)步驟
本篇文章主要介紹了VsCode新建VueJs項(xiàng)目的詳細(xì)步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
在開發(fā)中我們想要給一個(gè)組件的顯示和消失添加某種過渡動(dòng)畫,可以很好的增加用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于Vue3過渡動(dòng)畫踩坑的相關(guān)資料,需要的朋友可以參考下2021-12-12
Vue實(shí)現(xiàn)大屏頁面的屏幕自適應(yīng)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)大屏頁面的屏幕自適應(yīng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件
這篇文章主要介紹了詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue中pc移動(dòng)滾動(dòng)穿透問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue組件之作用域插槽，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
vue通過v-html指令渲染的富文本無法修改樣式的解決方案
這篇文章主要介紹了vue通過v-html指令渲染的富文本無法修改樣式的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了vue觀察模式淺析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vueCli4如何配置vue.config.js文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
表單元素挺多的，本文主要介紹了element的表單元素使用總結(jié)，主要包括文本框類、選擇類、其他類，有一定的參考價(jià)值，感興趣的可以了解一下2021-06-06