vue生命週期的快速記憶方法

2021-10-01 20:55:32 字數 799 閱讀 2548

概念

從vue例項建立、執行、到銷毀期間,總是伴隨著各種各樣的事件,這些事件統稱為生命週期。而生命週期中的各種事件被稱為生命週期鉤子函式。

建立期間的生命週期函式:

beforecreate:在例項初始化時同步呼叫。此時資料觀測、事件等都尚未初始化。

created:在例項建立之後呼叫。此時已完成資料繫結,事件方法,但尚未開始dom編譯,即未掛載到document

beforemount: 此時已經完成了模板的編譯,但是還沒有掛載到頁面中

執行期間的生命週期函式:

mounted:編譯結束時呼叫,此時所有指令都以生效,觸發dom更新,但不保證$el已插入文件。

beforeupdated:狀態更新之前執行此函式, 此時 data 中的狀態值是最新的,但是介面上顯示的 資料還是舊的,因為此時還沒有開始重新渲染dom節點

updated:例項更新完畢之後呼叫此函式,此時 data 中的狀態值 和 介面上顯示的資料,都已經完成了更新,介面已經被重新渲染好了!

銷毀期間的生命週期函式:

beforedestroy:例項銷毀之前呼叫。在這一步,例項仍然完全可用。

destroyed:vue 例項銷毀後呼叫。呼叫後,vue 例項指示的所有東西都會解繫結,所有的事件***會被移除,所有的子例項也會被銷毀。

[文章參考:

vue生命週期方法

vue生命週期圖示 來自李南江老師的圖 建立期間的生命週期方法 beforecreate 在呼叫beforecreate的時候,vue例項剛剛被建立出來,此時還未初始化好vue例項中的資料和方法,所以還不能訪問vue例項中儲存的資料和方法 created 在呼叫created的時候,是我們最早能夠訪...

Vue例項方法 生命週期

示例 var mycomponent vue.extend newmycomponent mount 同上 newmycomponent 或者,在文件之外渲染並且隨後掛載 var component newmycomponent mount document.getelementbyid compo...

Vue基礎(Vue的生命週期方法)

從new vue的建立到銷毀的過程是生命週期 生命週期 vue是乙個建構函式,當執行這個函式時,相當於初始化vue例項 在建立例項過程中,需要設定資料監聽,編譯模板,將例項掛載到dom上,資料更新能夠讓dom也更新,在這個初始化,又會在不同階段預設呼叫一些函式執行,這些函式就是生命週期的鉤子函式 生...