Vue之生命週期簡述

2021-10-09 14:45:08 字數 1105 閱讀 4387

vue生命週期是指從vue例項建立到虛擬dom產生再到資料繫結、資料監聽、資料渲染以及銷毀的整個過程。

vue例項初始化階段

生命週期的第一步首先是建立vue例項,並且進行初始化。
beforecreate

在初始化的時候呼叫了beforecreate,完成了vue例項的生命週期相關屬性的初始化以及事件的 初始化。這個時候還不能直接訪問data中的屬性及method中的方法。

created

在初始化完畢以後,完成了vue的資料注入及資料監聽操作,該鉤子的執行意味著vue例項建立 完畢,可以進行資料的訪問操作。

掛載階段

生命週期的第二步是掛載並渲染。
beforemount

在created之後,vue會判斷例項中是否含有el屬性,如果沒有會呼叫vm.$mount(el) ,接著會判斷是否含有template屬性,如果有將其解析為乙個render function ,如果沒有將el指定的外部html進行解析。這裡只是完成了模板的解析但是資料並沒有繫結到模板中。

mounted

建立vm.$el替換el,實際上這裡完成的是資料繫結操作,在期間執行了render函式,將模板進行了解析,將資料進行了動態繫結。

更新階段

截止到現在,vue已經將頁面顯示了出來。隨著使用者的操作會引起資料改變進而導致頁面重新整理。
beforeupdate

更新虛擬dom節點。

updated

完成了頁面的重新渲染。

銷毀階段

beforedestroy

銷毀之前呼叫,此時還是可以訪問vue例項的。

destroyed

完成了***,子元件,事件監聽等移除,銷毀vue例項物件。

vue生命週期簡述

beforecreate this.dat a和th is data 和this.data和t his.el都沒準備好,都是undefined created this.dat a有了,能讀取到 了,但是 dom還 沒載入,this data有了,能讀取到了,但是dom還沒載入,this.data有...

簡述Vue生命週期

從生到死的特定階段呼叫的方法 ps 生命週期鉤子 生命週期函式 生命週期事件 vue生命週期介紹,官網 2.1 建立期間的生命週期方法 beforecreate 方法特點 呼叫時沒有初始化好vue例項中的資料 data 和方法 methods 即呼叫此方法時還不能呼叫vue例項的資料和方法。crea...

簡述vue生命週期

一 初始化階段 1.第乙個執行生命週期函式,注意 在這個函式執行的時候vue例項僅僅完成內部事件和使用生命週期方法初始化 beforecreate 2.第二個執行生命週期函式,注意 在這個函式執行的時候vue例項已經完成自定義data methods computed等屬性初始化以及語法校驗 cre...