Vue元件的生命週期以及鉤子函式的作用

2021-10-04 09:09:51 字數 1363 閱讀 6278

乙個元件從建立到銷毀的過程叫做元件生命週期。

vue在生命週期中提供了一些函式可以在其內部實現一些業務邏輯並且這些函式會在一些特定的場合下執行。

元件的生命週期鉤子函式大致可以分為三個階段:初始化、執行中、銷毀

初始化階段: beforecreate created beforemount mounted

執行中階段: beforeupdate updated

銷毀階段: beforedestroy destroyed

乙個元件或者例項的生命週期都是通過例項化開始的

例項化之後,內部會做一些初始化事件與生命週期相關的配置

vue.

component

("my-component",}

,

beforecreate這個鉤子函式在例項化之後立刻執行,並且在這個函式中無法獲取資料同時頁面的真實dom節點也沒有渲染出來為null

beforecreate()

created這個鉤子函式在例項化之後立即執行,可以獲取到資料頁面真實dom沒有渲染出來,所以在這個函式中可以進行ajax非同步請求以及一些初始化事件的繫結

created()

接下來的過程,就是元件或者例項去查詢各自的模板,讓後將其編譯成虛擬dom,即將放入render函式中做初始化渲染的操作。

beforemount代表dom馬上就要被渲染出來了,但是還沒有真正的在頁面中渲染出來這個鉤子函式與created鉤子函式基本一致,可以做ajax與初始化事件的繫結操作

beforemount()

,

生成好了虛擬dom,然後在render函式裡面替換對應的el,渲染成真實dom節點相當於在render函式裡面做了乙個初始化渲染的操作

mounted鉤子函式是初始化階段的最後乙個鉤子函式

資料已經掛載完畢了,真實的dom也已經渲染出來了

這個鉤子函式可以用來做一些例項化的相關操作比如輪播圖的例項化相關操作

mounted()

beforeupdate執行時這個鉤子函式初始化階段是不會主動執行的

只有dom掛載完畢了,然後再去當資料更新之前的時候,beforeupdate這個鉤子函式才會執行

beforeupdate()

updated執行時這個鉤子函式不會執行只有dom掛載完畢資料更新之後才執行

beforedestroy 在元件銷毀之前執行這個函式元件銷毀的時候要儲存一些資料,就可以監聽這個銷毀的生命週期函式

destroyed這個鉤子函式元件銷毀完成時執行

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 完成模板...

vue生命週期鉤子

生命週期 vue 例項從開始建立 初始化資料 編譯模板 掛載dom 渲染 更新 渲染 解除安裝等一系列過程,我們稱這是 vue 的生命週期,各個階段有相對應的事件鉤子。函式元件狀態 最好的用法 beforecreate 例項初始化之後,this指向建立的例項,不能訪問到data computed w...