vue2 0生命週期解讀

2021-08-23 14:19:47 字數 1017 閱讀 3805

首先看下官方概念解釋:

1.beforecreate

建立前的狀態(建立例項前,vue例項的屬性值為undefined)。

2.created

例項建立完成後(data被定義了,但el屬性為undefined)。然而,掛載階段還沒開始,$el屬性目前不可見。

3.beforemount

掛鉤前(dom渲染前),el屬性已經拿到對應的dom元素。

4.mounted

掛載結束(dom渲染完成,el屬性的dom的資料將被渲染),對已有dom節點的操作可以在這期間進行。

5.beforeupdate

資料變化前的呼叫。

6.updated

資料變化後的鉤子。

7.beforedestroy

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

8.destroyed

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

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

自己寫了一段測試**,測試內容如下:

1.什麼時候可以最先獲取到data裡的值;

2.什麼時候可以最先獲取到頁面dom;

666888

來看下頁面載入好後控制台列印的結果:

可以看到 :

created  階段:第一次可以穩定獲取到data裡的值,並能修改data裡的值;

mounted  階段:第一次穩定獲取到dom元素(為什麼說是 「穩定獲取」,因為測試時偶爾會發現在created和beforemount兩個階段也會偶爾出現獲取到dom的情況);

mounted 階段後面的階段在初始載入時都未被執行。

vue2 0生命週期(二)

123 4567 891011 12js newvue 給模板傳遞的資料 data 其中vue函式稱為建構函式,使用new就可以例項化出來乙個例項化物件。剛剛接觸vue.js,之前使用react.js知道需要搞清楚它的生命週期及其每個鉤子函式的含義。鉤子函式 description beforecr...

vue2 0生命週期詳解

內容beforecreate 建立前 在資料觀測和初始化事件還未開始 created 建立後 完成資料觀測,屬性和方法的運算,初始化事件,el屬性未見 beforemount 載入前 mounted 載入後 在el 被新建立的 vm.el 替換,並掛載到例項上去之後呼叫。例項已完成以下的配置 用上面...

vue2 0生命週期詳解

週期名稱 內容beforecreate 建立前 在資料觀測和初始化事件還未開始 created 建立後 完成資料觀測,屬性和方法的運算,初始化事件,el屬性未見 beforemount 載入前 mounted 載入後 在el 被新建立的 vm.el 替換,並掛載到例項上去之後呼叫。例項已完成以下的配...