如果想要了解哪個(gè)生命周期中可以找到vue實(shí)例的data,那我們必須了解,vue實(shí)例初始化的基本流程。
一、vue實(shí)例的初始化過程
1. new Vue從new Vue(options) 開始作為入口,Vue只是一個(gè)簡(jiǎn)單的構(gòu)造函數(shù),內(nèi)部是這樣的: function Vue (options) { this._init(options) } 進(jìn)入了 _init 函數(shù)之后,先初始化了一些屬性。
(1. initLifecycle:初始化一些屬性如$parent,$children。根實(shí)例沒有 $parent,$children開始是空數(shù)組,直到它的子組件實(shí)例進(jìn)入到initLifecycle時(shí),才會(huì)往父組件的 $children里把自身放進(jìn)去。所以$children里的一定是組件的實(shí)例。initEvents:初始化事件相關(guān)的屬性,如 _events 等。
(2. initRender:初始化渲染相關(guān)如 $createElement,并且定義了$attrs和$listeners為淺層響應(yīng)式屬性。
具體可以查看細(xì)節(jié)章節(jié)。并且還定義了$slots、$scopedSlots,其中$slots是立刻賦值的,但是$scopedSlots初始化的時(shí)候是一個(gè)emptyObject,直到組件的vm._render過程中才會(huì)通過normalizeScopedSlots去把真正的$scopedSlots整合后掛到vm上。然后開始第一個(gè)生命周期: callHook(vm, 'beforeCreate')
2. beforeCreate被調(diào)用完成 beforeCreate 之后
(1. 初始化inject
(2. 初始化state - 初始化props - 初始化methods - 初始化data - 初始化computed - 初始化watch
(3. 初始化provide 所以在data中可以使用 props 上的值,反過來則不行。然后進(jìn)入 created 階段: callHook(vm, 'created')
3. created被調(diào)用完成 調(diào)用 $mount 方法,開始掛載組件到dom上。如果使用了 runtime-with-compile版本,則會(huì)把你傳入的template選項(xiàng),或者h(yuǎn)tml文本,通過一系列的編譯生成 render 函數(shù)。
- 編譯這個(gè) template,生成 ast 抽象語法樹。
- 優(yōu)化這個(gè) ast,標(biāo)記靜態(tài)節(jié)點(diǎn)。(渲染過程中不會(huì)變的那些節(jié)點(diǎn),優(yōu)化性能)。
- 根據(jù) ast,生成 render 函數(shù)。 對(duì)應(yīng)具體的代碼就是: const ast = parse(template.trim(), options) if (options.optimize !== false) { optimize(ast, options) } const code = generate(ast, options) 如果是腳手架搭建的項(xiàng)目的話,這一步 vue-cli 已經(jīng)幫你做好了,所以就直接進(jìn)入 mountComponent 函數(shù)。
那么,確保有了render函數(shù)后,我們就可以往 渲染的步驟繼續(xù)進(jìn)行了
二、結(jié)論:通過上面的vue實(shí)例化的前面幾步我們可以知道,在created生命周期中,我們就可以對(duì)data做操作,因?yàn)榇藭r(shí)根實(shí)例相關(guān)的屬性都已準(zhǔn)備完畢。
那在created后面執(zhí)行的生命周期,自然也都可以獲取并操作data,所以能夠操作data的常用生命周期就有如下幾個(gè):
- created - beforeMount - mounted - beforeUpdate - updated