Vue組件生命周期運(yùn)行原理解析
Vue實(shí)例有一個完整的生命周期,從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛在DOM、渲染-更新-渲染、卸載等一系列過程,我們成為Vue 實(shí)例的生命周期,鉤子就是在某個階段給你一個做某些處理的機(jī)會。

beforeCreate( 創(chuàng)建前 )
在實(shí)例初始化之后,數(shù)據(jù)觀測和事件配置之前被調(diào)用,此時組件的選項對象還未創(chuàng)建,el 和 data 并未初始化,因此無法訪問methods, data, computed等上的方法和數(shù)據(jù)。
created ( 創(chuàng)建后 )
實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用,在這一步,實(shí)例已完成以下配置:數(shù)據(jù)觀測、屬性和方法的運(yùn)算,watch/event事件回調(diào),完成了data 數(shù)據(jù)的初始化,el沒有。 然而,掛在階段還沒有開始, $el屬性目前不可見,這是一個常用的生命周期,因為你可以調(diào)用methods中的方法,改變data中的數(shù)據(jù),并且修改可以通過vue的響應(yīng)式綁定體現(xiàn)在頁面上,,獲取computed中的計算屬性等等,通常我們可以在這里對實(shí)例進(jìn)行預(yù)處理,也有一些童鞋喜歡在這里發(fā)ajax請求,值得注意的是,這個周期中是沒有什么方法來對實(shí)例化過程進(jìn)行攔截的,因此假如有某些數(shù)據(jù)必須獲取才允許進(jìn)入頁面的話,并不適合在這個方法發(fā)請求,建議在組件路由鉤子beforeRouteEnter中完成。
beforeMount
掛在開始之前被調(diào)用,相關(guān)的render函數(shù)首次被調(diào)用(虛擬DOM),實(shí)例已完成以下的配置: 編譯模板,把data里面的數(shù)據(jù)和模板生成html,完成了el和data 初始化,注意此時還沒有掛在html到頁面上。
mounted
掛在完成,也就是模板中的HTML渲染到HTML頁面中,此時一般可以做一些ajax操作,mounted只會執(zhí)行一次。
beforeUpdate
在數(shù)據(jù)更新之前被調(diào)用,發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前,可以在該鉤子中進(jìn)一步地更改狀態(tài),不會觸發(fā)附加地重渲染過程
updated(更新后)
在由于數(shù)據(jù)更改導(dǎo)致地虛擬DOM重新渲染和打補(bǔ)丁只會調(diào)用,調(diào)用時,組件DOM已經(jīng)更新,所以可以執(zhí)行依賴于DOM的操作,然后在大多是情況下,應(yīng)該避免在此期間更改狀態(tài),因為這可能會導(dǎo)致更新無限循環(huán),該鉤子在服務(wù)器端渲染期間不被調(diào)用
beforeDestroy(銷毀前)
在實(shí)例銷毀之前調(diào)用,實(shí)例仍然完全可用,
這一步還可以用this來獲取實(shí)例,
一般在這一步做一些重置的操作,比如清除掉組件中的定時器 和 監(jiān)聽的dom事件
destroyed(銷毀后)
在實(shí)例銷毀之后調(diào)用,調(diào)用后,所以的事件監(jiān)聽器會被移出,所有的子實(shí)例也會被銷毀,該鉤子在服務(wù)器端渲染期間不被調(diào)用
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue中keep-alive組件使用和一些基礎(chǔ)配置方法
本文主要介紹了Vue中keep-alive組件的使用方法和一些基礎(chǔ)配置,keep-alive是Vue中的一個抽象組件,可以緩存組件實(shí)例,提高性能,本文給大家介紹vue中keep-alive組件使用和一些基礎(chǔ)配置方法,感興趣的朋友一起看看吧2024-10-10
解決vue項目中遇到 Cannot find module ‘chalk‘ 報錯的問題
這篇文章主要介紹了解決vue項目中遇到 Cannot find module ‘chalk‘ 報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue中對象數(shù)組改變其對象內(nèi)容值數(shù)組沒變化的原因與解決方案
最近開發(fā)遇到一個問題,修改對象某一個索引對象時,直接將對象賦值給數(shù)組的某一索引對象,該數(shù)組沒變化,在 Vue 中,直接修改對象數(shù)組中某個對象的屬性值時,數(shù)組的引用本身未改變,本文介紹了詳細(xì)的原理分析和解決方案,需要的朋友可以參考下2025-03-03
在vue中使用axios實(shí)現(xiàn)post方式獲取二進(jìn)制流下載文件(實(shí)例代碼)
這篇文章主要介紹了在vue中使用axios實(shí)現(xiàn)post方式獲取二進(jìn)制流下載文件的相關(guān)資料,需要的朋友可以參考下2019-12-12
vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中
這篇文章主要介紹了vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
vue-photo-preview圖片預(yù)覽失效的問題及解決
這篇文章主要介紹了vue-photo-preview圖片預(yù)覽失效的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09
Vue拖拽組件列表實(shí)現(xiàn)動態(tài)頁面配置功能
這篇文章主要介紹了Vue拖拽組件列表實(shí)現(xiàn)動態(tài)頁面配置功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06

