vue生命週期淺解析

2021-10-02 16:54:52 字數 720 閱讀 2976

每個vue例項從建立到銷毀都有乙個生命週期,理解生命週中每個鉤子的意義可以幫助我們快速理解使用vue

(下圖源自vue官網)

1.beforecreated(建立前)

vue例項化以後首先執行beforecreated鉤子,該鉤子函式在資料觀測和事件配置之前被呼叫,所以無法訪問例項中的資料和方法

beforecreated()
vue例項完成建立,資料觀測和事件配置已經完成,在鉤子函式中可以呼叫methods裡面的函式

created()
掛載前被呼叫,此時只能獲取到data和虛擬的dom

beforemount()
template中的html已經掛到外部html,展示在頁面上,這個只在例項第一次渲染呼叫,當資料改變更新頁面時是不會再呼叫這個鉤子的,也就是說乙個生命週期中只會呼叫一次

mounted()
資料發生改變時,虛擬dom發生改變的階段,在這個階段還可以對資料進行更改

元件dom已更新完畢,該鉤子在渲染中不被呼叫

關閉例項銷毀前這個階段可以把頁面資料重置

該鉤子在渲染中不被呼叫,例項銷毀後,例項中的事件,子例項被銷毀,所有東西都會解綁

Vue生命週期解析

生命週期所有階段 建立 beforemount 注意 這裡進行虛擬的dom變成真實的dom資料 mounted 最早在這裡渲染的變數被賦值了,最遲在這裡做資料請求 要和第三方的元件庫進行結合的時候,我們要放在mounted裡面 更新 注意 資料在mounted裡進行變化,在這裡的資料都是更新後的資料...

Vue的生命週期解析

1.每當我們新建乙個vue的時候,此時vue的生命週期就正式開始了 2.每當我們引入vue的包的時候,就自動引入new vue 3.每當我們引入resource包的時候,就會自動引入this.http.put,get等等 請求 beforecreate 該方法執行的時候資料都還沒有初始化 creat...

vue生命週期

beforecreate 元件例項剛剛被建立,屬性都沒有 create 例項已經建立完成,屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...