VUE的生命週期詳解

2021-10-10 08:48:45 字數 1259 閱讀 7233

1.beforecreate(建立前):在資料觀測和初始化事件還未開始

beforecreate:


function()
2.created(建立後):完成資料觀測，屬性和方法的運算，初始化事件，$el屬性還沒有顯示出來

created:


function()
3.beforemount(載入前):

在掛載開始之前被呼叫，相關的render函式首次被呼叫。

例項已完成以下的配置：編譯模板，把data裡面的資料和模板生成html。注意此時還沒有掛載html到頁面上。

beforemount:


function()


,
4.mounted（載入後）:

在el 被新建立的 vm.$el 替換，並掛載到例項上去之後呼叫。

例項已完成以下的配置：用上面編譯好的html內容替換el屬性指向的dom物件。完成模板中的html渲染到html頁面中。此過程中進行ajax互動。

mounted:


function()


,
5.beforeupdate（更新前）:

在資料更新之前呼叫，發生在虛擬dom重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。

beforeupdate:


function()


,
6.updated（更新後）:

在由於資料更改導致的虛擬dom重新渲染和打補丁之後呼叫。

呼叫時，元件dom已經更新，所以可以執行依賴於dom的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限迴圈。

該鉤子在伺服器端渲染期間不被呼叫。

updated:


function()


,
7.beforedestroy（銷毀前）:在例項銷毀之前呼叫。例項仍然完全可用。

beforedestroy:


function()


,
8.destroyed（銷毀後）:

在例項銷毀之後呼叫。呼叫後，所有的事件***會被移除，所有的子例項也會被銷毀。該鉤子在伺服器端渲染期間不被呼叫。

destroyed:


function()

vue生命週期詳解

vue生命週期分為八個階段 建立前後 掛載前後 更新前後 銷毀前後 beforecreate和create鉤子函式間的生命週期 檢測資料，來檢測資料是否變化了，然後初始化事件 create和beforemount鉤子函式間的生命週期 首先判斷有沒有el選項 1.如果沒有的話就暫時停止了生命週期，等待...

vue生命週期詳解

最近在寫業務的時候，總是會遇到一些和vue的生命週期相關的問題，比如 你用ajax請求資料，然後將資料props到子元件的時候，因為ajax是非同步的，然後會發生沒有資料。然後查詢原因還是自己對這個東西理解不夠深入。什麼是生命週期函式？比如 mounted function 或者 mounted 複...

vue生命週期詳解

beforecreate 第乙個生命週期函式，表示例項完全被建立出來之前，會執行它 注意 在 beforecreate 生命週期函式執行的時候，data 和 methods 中的 屬性與方法定義都還沒有沒初始化 created 第二個生命週期函式，在 created 中，data 和 methods...