生命週期

God、夜發表於2024-09-20

Vue生命週期
Vue的生命週期是指Vue例項從建立到銷燬的過程,它包括了一系列的階段,每個階段都有特定的鉤子函式(Lifecycle Hooks),可以在這些鉤子函式中新增自己的程式碼,以實現不同的功能。Vue的生命週期可以分為四個主要階段:建立階段、掛載階段、更新階段和銷燬階段。

建立階段
在建立階段,Vue例項開始初始化,並開始觀察資料。這個階段有beforeCreate和created兩個生命週期鉤子函式。

beforeCreate
在beforeCreate鉤子函式中,this物件已經存在,但data, methods, computed以及watch上的資料和方法還未初始化,因此不能被訪問1。

created
在created鉤子函式中,data和methods都已經初始化,但還沒有$el(DOM節點)。在這個階段,可以使用Ajax請求定時器或事件監聽器1。

掛載階段
在掛載階段,Vue將實現DOM的掛載,這意味著頁面可以在瀏覽器中看到。這個階段有beforeMount和mounted兩個生命週期鉤子函式。

beforeMount
在beforeMount鉤子函式中,模板已經匯入並編譯成渲染函式,但真實的DOM節點還未掛載。在這個階段,也可以對資料進行更改1。

mounted
在mounted鉤子函式中,真實的DOM節點已經掛載完畢,資料完成了雙向繫結,可以訪問到DOM節點,並使用$refs屬性對DOM進行操作1。

更新階段
在更新階段,Vue例項的資料發生變化時,會導致DOM節點更新。這個階段有beforeUpdate和updated兩個生命週期鉤子函式。

beforeUpdate
在beforeUpdate鉤子函式中,資料即將更新,但DOM節點還未更新1。

updated
在updated鉤子函式中,資料更新完畢,DOM節點也更新完成1。

銷燬階段
在銷燬階段,Vue例項開始銷燬,所有的事件監聽器被移除,所有的子例項也被銷燬。這個階段有beforeDestroy和destroyed兩個生命週期鉤子函式。

beforeDestroy
在beforeDestroy鉤子函式中,Vue例項開始銷燬,所有的事件監聽器將被移除1。

destroyed
在destroyed鉤子函式中,Vue例項完全銷燬1。

以上就是Vue生命週期的四個主要階段及其對應的鉤子函式。透過這些生命週期鉤子函式,我們可以在不同的階段控制Vue例項的行為,實現各種功能。

相關文章