vue生命週期created 前做了什麼

2021-09-28 15:02:23 字數 1620 閱讀 5588

我們在做專案時,通常會在元件created()鉤子函式中請求後端介面,得到資料後渲染檢視,這樣可以達到切換到對應頁面,即可顯示後端資料。

問題: vue生命週期created()前做了什麼?

我們可以看到,官網上給出的是,created()之前執行了初始化注入、初始化化校驗

從vue2原始碼看看:

路徑:\vue-dev\src\core\instance\init.js

export

function

initmixin

(vue: class

)}

我們可以看到,在beforecreate與created之間,呼叫了initinjections、initstate、initprovide三個函式。在這之前要了解provide/inject是什麼

1.initinjections作用

**:\vue-dev\src\core\instance\inject.js

export

function

initinjections

(vm: component)"`,

vm)})

}else})

toggleobserving

(true)}

}

可以看出,initinjections是將inject轉換成物件,並遍歷這個物件,從vm._provided中找到對應的值。

2.initstate作用

路徑:\vue-dev\src\core\instance\state.js

export

function

initstate

(vm: component)

else

,true

/* asrootdata */)}

if(opts.computed)

initcomputed

(vm, opts.computed)

if(opts.watch && opts.watch !== nativewatch)

}

可以看出來initstate()是初始化props、methods、data、computed、watch引數

3.initprovide 作用

**:\vue-dev\src\core\instance\inject.js

export

function

initprovide

(vm: component)

}

可以看出,initprovide()就是將當前例項的provide的物件賦值vm._provided

所以從beforecreate到created之間,vue初始化了inject/provide、props、methods、data、computed、watch這些屬性,也就是資料的初始化。

VUE生命週期created和mounted的區別

每個 vue 例項在被建立時都要經過一系列的初始化過程。例如,需要設定資料監聽 編譯模板 將例項掛載到 dom 並在資料變化時更新 dom 等。在這個過程中也會執行一些叫做生命週期鉤子的函式,這給了使用者在不同階段新增自己的 的機會。created 在模板渲染成html前呼叫,即通常初始化某些屬性值...

vue生命週期

beforecreate 元件例項剛剛被建立,屬性都沒有 create 例項已經建立完成,屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...

vue生命週期

vue把整個生命週期劃分為建立 掛載 更新 銷毀等階段,每個階段都會給一些 鉤子 讓我們來做一些我們想實現的動作。學習例項的生命週期,能幫助我們理解vue例項的運作機制,更好地合理利用各個鉤子來完成我們的業務 我們分別來看看這幾個階段 1.beforecreate 此階段為例項初始化之後,此時的資料...