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