vue生命週期詳解

2021-10-12 16:41:46 字數 1539 閱讀 4249

生命週期示意圖

生命週期

生命週期是指vue例項(或者元件)從建立到銷毀所經歷的各個階段的總和。

生命週期分為3個階段,分別是建立執行銷毀

成員方法

各個階段在vue例項內部都有對應的成員方法,可以定義、執行、感知。

​ 建立階段:beforecreatecreatedbeforemount mounted

​ 執行階段:beforeupdate updated

​ 銷毀階段: beforedestroy destroyed

不同階段完成不同的任務,開發者可以利用各個階段的特點及提供的生命週期鉤子函式完成業務需要的相關功能。

建立階段一共有4個方法,它們與 el、data都是並列關係的。

new

vue(

,// 初始化vue物件

created()

,// data、methods初始化

beforemount()

,// 模板掛載

mounted()

,// 模板渲染

})

created:

beforemount:

mounted:

注意

建立階段各個方法不設定則以,設定後就會自動執行,並且會順序只執行一次

執行階段只有兩個生命週期方法,當vue物件data中的資料發生改變,會觸發元件的重新渲染,先後呼叫beforeupdate 和 updated 鉤子函式。

new

vue(

// 可以感知到資料變化之前頁面上關於該資料的樣子

updated()

// 可以感知到資料變化之後頁面上該資料的樣子

})

注意

執行階段方法不會自動執行,當data成員資料發生變化,才會執行,並且資料變化多次,方法也會重複執行多次。

beforedestroy 鉤子函式在vue例項銷毀之前呼叫。在這一步,vue例項仍然可用。

destroyed 鉤子函式在vue例項銷毀之後呼叫。呼叫後,vue例項物件的所有屬性都會解除繫結,所有的事件***也都會被移除,所有的子例項也都會被銷毀。

new

vue(

// 例項銷毀之前

destroyed()

// 例項銷毀之後

})

執行 vm.$destroy() 方法,vue例項就會被銷毀。

注意

生命週期的各個方法與 el、data、methods 等成員都是並列的,它們有固定的執行順序,與設定順序沒有關係。

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...