Vue實(shí)例中生命周期created和mounted的區(qū)別詳解
前言
本文主要跟大家介紹了關(guān)于Vue實(shí)例中生命周期created和mounted區(qū)別的相關(guān)內(nèi)容,分享出來供大家參考學(xué)習(xí),下面話不多說了,來一起看看詳細(xì)的介紹吧。
生命周期先上圖
什么是生命周期
Vue實(shí)例有一個(gè)完整的生命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程,我們稱這是Vue的生命周期。通俗說就是Vue實(shí)例從創(chuàng)建到銷毀的過程,就是生命周期。
在Vue的整個(gè)生命周期中,它提供了一系列的事件,可以讓我們在事件觸發(fā)時(shí)注冊js方法,可以讓我們用自己注冊的js方法控制整個(gè)大局,在這些事件響應(yīng)方法中的this直接指向的是vue的實(shí)例。
再上圖,對生命周期圖的標(biāo)注
特別值得注意的是created鉤子函數(shù)和mounted鉤子函數(shù)的區(qū)別
每個(gè)鉤子函數(shù)都在啥時(shí)間觸發(fā)
beforeCreate
在實(shí)例初始化之后,數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用。
created
實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步,實(shí)例已完成以下的配置:數(shù)據(jù)觀測(data observer),屬性和方法的運(yùn)算, watch/event 事件回調(diào)。然而,掛載階段還沒開始,$el 屬性目前不可見。
beforeMount
在掛載開始之前被調(diào)用:相關(guān)的 render 函數(shù)首次被調(diào)用。
mounted
el 被新創(chuàng)建的 vm.$el 替換,并掛載到實(shí)例上去之后調(diào)用該鉤子。
beforeUpdate
數(shù)據(jù)更新時(shí)調(diào)用,發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。 你可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài),這不會觸發(fā)附加的重渲染過程。
updated
由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁,在這之后會調(diào)用該鉤子。
當(dāng)這個(gè)鉤子被調(diào)用時(shí),組件 DOM 已經(jīng)更新,所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下,你應(yīng)該避免在此期間更改狀態(tài),因?yàn)檫@可能會導(dǎo)致更新無限循環(huán)。
該鉤子在服務(wù)器端渲染期間不被調(diào)用。
beforeDestroy
實(shí)例銷毀之前調(diào)用。在這一步,實(shí)例仍然完全可用。
destroyed
Vue 實(shí)例銷毀后調(diào)用。調(diào)用后,Vue 實(shí)例指示的所有東西都會解綁定,所有的事件監(jiān)聽器會被移除,所有的子實(shí)例也會被銷毀。 該鉤子在服務(wù)器端渲染期間不被調(diào)用。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
Vue裝飾器中的vue-property-decorator?和?vux-class使用詳解
這篇文章主要介紹了Vue裝飾器中的vue-property-decorator?和?vux-class使用詳解,通過示例代碼給大家介紹的非常詳細(xì),對vue-property-decorator?和?vux-class的使用感興趣的朋友一起看看吧2022-08-08Vue關(guān)于數(shù)據(jù)綁定出錯(cuò)解決辦法
這篇文章主要介紹了Vue關(guān)于數(shù)據(jù)綁定出錯(cuò)解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05Vue 利用指令實(shí)現(xiàn)禁止反復(fù)發(fā)送請求的兩種方法
這篇文章主要介紹了Vue 利用指令實(shí)現(xiàn)禁止反復(fù)發(fā)送請求的兩種方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09vue和react的區(qū)別及優(yōu)缺點(diǎn)解讀
這篇文章主要介紹了vue和react的區(qū)別及優(yōu)缺點(diǎn)說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03vue2結(jié)合echarts實(shí)現(xiàn)一個(gè)地圖的效果
這篇文章主要介紹了vue2結(jié)合echarts實(shí)現(xiàn)一個(gè)地圖的效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家何用vue和echarts實(shí)現(xiàn)一個(gè)地圖有一定的幫助,感興趣的朋友一起看看吧2024-03-03vue3使用useDialog實(shí)現(xiàn)對話框的示例代碼
在日常開發(fā)中,彈窗是常見的一個(gè)功能,本文主要介紹了vue3使用useDialog實(shí)現(xiàn)對話框的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01