vue2 0生命週期（二）

2021-09-20 22:05:43 字數 1911 閱讀 8848

123


4567


891011


12
js**:


newvue(}


',/* 給模板傳遞的資料 */


data: 


})
其中vue函式稱為建構函式，使用new就可以例項化出來乙個例項化物件。

剛剛接觸vue.js, 之前使用react.js知道需要搞清楚它的生命週期及其每個鉤子函式的含義。

鉤子函式

description

beforecreate

元件例項剛被建立，元件屬性計算之前，如data屬性等

created

元件例項建立完成，屬性已繫結，但dom還未生成，$el屬性還不存在

beforemount

模板編譯/掛載之前

mounted

模板編譯/掛載之後

beforeupdate

元件更新之前

updated

元件更新之後

activated

for keep-alive, 元件被啟用時呼叫

deactivated

for keep-alive, 元件被移除時呼叫

beforedestory

元件銷毀前呼叫

對於執行順序和什麼時間執行，看上面的圖會比較沒有太多的耐心，因此先看一下鉤子函式的執行然後再回頭看圖會更容易理解。

123


4567


891011


1213


1415


1617


1819


2021


2223


2425


2627


2829


3031


3233


3435


3637


3839


4041


4243


4445


4647


4849


5051


5253


5455


5657


5859


6061


6263


6465


6667


68
// the vue build version to load with the `import` command


// (runtime-only or standalone) has been set in webpack.base.conf with an alias.


import vue from


'vue'


import router from


'./router'


vue.config.productiontip = false


/* eslint-disable no-new */


router,


data: ,


beforecreate: function () ,


created: function () ,


beforemount: function () ,


mounted: function () ,


beforeupdate: function () ,


updated: function () ,


beforedestory: function () ,


destroyed: function () ,


})
這段**驗證了再vue.js中的生命週期的每個階段，需要再結合圖來看每個鉤子函式。

賞 謝謝你請我吃糖果

vue2 0生命週期解讀

首先看下官方概念解釋 1.beforecreate 建立前的狀態 建立例項前，vue例項的屬性值為undefined 2.created 例項建立完成後 data被定義了，但el屬性為undefined 然而，掛載階段還沒開始，el屬性目前不可見。3.beforemount 掛鉤前 dom渲染前 e...

vue2 0生命週期詳解

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

vue2 0生命週期詳解

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