vue 專案實戰 生命週期鉤子

2021-09-07 19:58:58 字數 1114 閱讀 8236

開篇先來一張圖

下圖是官方展示的生命週期圖

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="

hello

">hello world!

console這樣乙個輸出順序:

大概這樣乙個 生命週期鉤子函式執行的順序,包括我之前是用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 完成模板...