vue生命週期詳解

2022-09-15 17:06:15 字數 1188 閱讀 8381

什麼是生命週期:

乙個元件從建立到銷毀的過程叫做生命週期

1.beforecreate:建立前

當元件初始化的時候會執行beforecreate,在當前生命週期中我們是無法訪問到data中的屬性以及 

methods中的方法

因為當前生命週期是初始化階段因此我們可以在當前生命週期中加乙個loading等待元件載入完畢以

後再移除loading

2.created:建立後

1)當前生命週期可以訪問到data中的屬性以及methods身上的方法。

2)當前生命週期執行的時候會將data身上的所有屬性遍歷新增getter/setter方法。

3)當前生命週期執行的時候會將data與methods身上所有的屬性和方法遍歷到vm的例項身上。

4)因為當前生命週期會遍歷data身上的屬性新增getter/setter,因此我們可以在當前生命週期函式

中進行前後端資料的互動

3.beforemount:掛載前

當前生命週期是資料和模板還未進行結合,我們可以在當前生命週期中做資料最後的更改。
4.mounted:掛載後

當前生命週期是資料和模板進行相結合,我們可以在當前生命週期中獲取到真實的dom結構

我們可以在當前生命週期中做方法的例項化例如(swiper、echarts...)

如何獲取到真實的dom結構?

通過給元素新增ref屬性 在mounted中通過this.$refs.屬性即可獲取

5.beforeupdate:更新前

在當前生命週期中是更新的資料與模板還未進行相結合,因此我們可以對更新的資料做最後的修改
6.updated:更新後

更新的資料與模板以及進行相結合,在當前生命週期中我們能可以獲取到資料更新後最新的dom結構
7.boforedestroy:銷毀前

在當前生命週期中我們仍然可以獲取到真實的dom結果因此我們可以做事件的移除,事件的解綁等
8.destroyed:銷毀後

在當前生命週期中我們訪問不到真實的dom結構了,以及當前的vm與頁面之間的關聯也斷開了

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