開篇先來一張圖
下圖是官方展示的生命週期圖
vue例項的生命週期鉤子函式(8個)
1. beforecreate
剛 new了乙個元件,無法訪問到資料和真實的dom,基本上這個好像不能幹啥
2. created
data屬性完成了賦值,可以對資料進行修改但是不會觸發updated,在這裡可以做初始資料的獲取
3. beforemount
render準備要渲染了,函式中虛擬dom已經建立完成,這時候改變資料也不會觸發update,在這裡可以做初始資料的獲取
4. mounted
開始render,渲染出真實dom,執行mounted鉤子函式,元件已經出現在頁面中,資料,事件,都dom都處理好了。這裡你 可以改是進行真實的dom操作
5. beforeupdate
元件,例項資料更新之前會執行的函式,虛擬dom會重新構建虛擬dom,與上一次的虛擬dom對比後重新渲染。切記不可 進行資料修改否則會出現死迴圈
6. updated
更新完會執行的函式,切記不可進行資料修改否則會出現死迴圈
7. beforedestroy
例項被銷毀之前會執行的函式,做善後的工作,清除計時器,清除非指令繫結的事件等等
8. destroyed
例項被銷毀後會執行的函式,也可以做善後工作。
class="console這樣乙個輸出順序:hello
">hello world!
大概這樣乙個 生命週期鉤子函式執行的順序,包括我之前是用angular開發跟vue一樣 他也有自己的生命週期鉤子函式。
生命週期簡單來說就是乙個元件從建立到初始化到銷毀的乙個過程,在這個過程中有這些生命週期鉤子函式我們可以更方便的去操作整乙個元件。
如果對您有幫助請動動滑鼠右下方給我來個贊,您的支援是我最大的動力。
生命週期鉤子 vue 專案實戰
vue例項的生命週期鉤子函式 8個 beforecreate 剛 new了乙個元件,無法訪問到資料和真實的dom,基本上這個好像不能幹啥 created data屬性完成了賦值,可以對資料進行修改但是不會觸發updated,在這裡可以做初始資料的獲取 beforemount render準備要渲染了...
vue生命週期鉤子
el 表示dom元素,data 表示資料 deforecreated el和data並未初始化 created 完成了data資料的初始化,el沒有 beforemount 完成了el和data初始化 mounted 完成掛載 el和data都初始化完成,並且掛載在頁面上了 注意 以下勾子只能在 k...
Vue 生命週期鉤子
從vue例項建立,執行,到銷毀期間,總是伴隨著各種各樣的事件,這些事件,稱為生命週期。建立 beforecreate 例項剛剛在記憶體中被建立出來,但data和methods還沒有進行初始化。created 例項已經在記憶體中建立,data和methods還沒有建立 beforemount 完成模板...