一、生命周期概念

首先，每一個vue實例都有一個完整的生命周期，主要分為五個階段：創建、初始化、渲染、運行、銷毀。?也就是從創建(new Vue（))、初始化數據(init)、編譯模板(render function)、掛載Dom($el)、渲染($mount)→更新(update)→渲染(Virtual Dom re-Render)、銷毀(destory)等一系列過程，我們稱這是Vue的生命周期。

通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。

二、vue生命周期圖解

三、具體詳解

1.創建階段

new Vue() 創建

表示開始創建一個vue實例對象。

2.初始化階段

創建之后這個時候就會調用this._init()方法，

letuid =0Vue.prototype._init =function(options){constvm= thisvm._uid = uid++? // 組件唯一標識vm.$options= mergeOptions(? // 合并optionsresolveConstructorOptions(vm.constructor),options|| {},vm)? ...? initLifecycle(vm) // 開始一系列的初始化? initEvents(vm)? initRender(vm)? callHook(vm,'beforeCreate')? initInjections(vm)? initState(vm)? initProvide(vm)? callHook(vm,'created')? ...if(vm.$options.el) {vm.$mount(vm.$options.el)? }}

2.1 合并options配置

1. 初始化new Vue

在執行new Vue構造函數時，參數就是一個對象，也就是用戶自定義配置；會將它和vue之前定義的原型方法、全局API 屬性、還有全局的Vue.mixin內的參數，將這些都合并成一個新的options, 最后賦值給一個新的屬性$options。

2. 子組件初始化

如果是子組件初始化， 除了合并以上那些外，還會將父組件的參數進行合并， 如有父組件定義在子組件上的event, props 等等。

經過合并之后就可以通過this.options.data訪問到用戶定義的data函數，this.options.name訪問到用戶定義的組件名稱，這個合并后的屬性很重要，會被經常使用到。

2.2 初始化事件和生命周期

剛初始化一個空的vue實例對象，這個時候只有一些生命周期函數和默認的事件，其他的東西都還為創建。

1.initLifecycle(vm)

確認組件（也是vue實例）的父子關系以及初始化vm.$parent， $children實例屬性。后面可進行事件的觸和數據的傳遞。

2.initEvents(vm)

主要作用是將父組件在使用v-on 或者 @ 注冊自定義事件添加到子組件的事件中心中。

原生事件

在執行initEvent之前模板編譯階段，會判斷遇到的是html標簽名 還是組件名。

如果是html標簽名，就會在轉為真是dom之后使用addEventListener注冊瀏覽器原生事件。 當然這個步驟是在掛載dom的最后階段，這歌時候是初始化階段，主要處理自定義事件。

自定義事件

在經過合并options 階段后， 子組件就可以從 vm.$options._parentListeners讀取到父組件傳過來的自定義事件。 通過updateListeners方法， 它的作用是借助之前定義的$on, $emit方法， 完成父子組件事件的通信。

3. initRender(vm)

主要作用是掛載，將render函數轉化為vnode的方法。

exportfunctioninitRender(vm){? vm._vnode = null? ...

? vm._c =(a,b,c,d) =>createElement(vm,a,b,c,d,false)//轉化編譯器的vm.$createElement =(a,b,c,d) =>createElement(vm,a,b,c,d,true)// 轉化手寫的? ...}

主要作用是掛載vm._c 和 vm.createElement兩個方法，它門只是最后一個參數不同，這兩個方法都可以將render函數轉為vnode,從命名大家應該可以看出區別，vm.c轉換的是通過編譯器將template轉換而來的render函數；而vm.createElement 兩個方法，它門只是最后一個參數不同，這兩個方法都可以將render函數轉為vnode, 從命名大家應該可以看出區別，vm._c 轉換的是通過編譯器將template 轉換而來的 render 函數； 而 vm.createElement兩個方法，它門只是最后一個參數不同，這兩個方法都可以將render函數轉為vnode,從命名大家應該可以看出區別，vm.c轉換的是通過編譯器將template轉換而來的render函數；而vm.createElement 轉換的是用戶自定義的 render 函數， 比如：

new Vue({data: {? ? msg:'hello Vue!'},? render(h) {// 這里的 h 就是vm.$createElementreturnh('span',this.msg);? ? }}).$mount('#app');

4.callHook(vm, ''beforeCreate)

執行beforeCreate里的內容；

靈魂一問：請問可以在beforeCreate 鉤子內通過 this 訪問到data中定義的變量么，為什么？ 請問這個鉤子可以做什么？

是不可以訪問的。 因為在vue 初始化階段， 這個時候data 中的變量還沒有掛載到this 上， 這個時候訪問值會是 undefined。 beforeCreate 這個鉤子在平時業務開發中比較少用。?像插件內部install 方法通過Vue.use 方法安裝時一般會選在beforeCreate 這個鉤子內執行， vue-router 和 vuex 就是這么干的。

2.3 初始化注入和校驗

1. initInjections(vm)?主要作用是初始化inject，可以訪問到對應的依賴。

inject 和 provide 是vue@2.2?版本添加的一對需要一起使用的API, 它允許父級組件向它之后的子孫組件提供依賴，讓子孫組件無論嵌套多深都可以訪問到。

provide : 提供一個對象或是返回一個對象的函數。 inject : 是一個字符串數組或對象。

舉一個栗子：

app.vue 根組件export default {? provide() {? ? return {? ? ? app: this? ? }? },? data() {? ? return {? ? ? info:'hello world!'}? }}child.vue 子孫組件export default {? inject: ['app'],? methods: {? ? handleClick() {? ? ? this.app.info='hello vue 變 world 啦!'}? }}

這樣可以簡單實現vuex的功能，但是要注意組件之間層級關系，可能會造成混亂的現象。

2. initState(vm)

初始化會被使用到的狀態：props、methods、data、computed、watch。

initProps(vm,propOptions)

主要作用是檢測子組件接收的值是否符合規則，以及對應的值可以用this直接訪問。

initMethods(vm, methods):

主要作用是將methods內的方法掛載到this下。命名規范的檢查。不能與props的key重名，以及不能以_、$開頭。

initData(vm)

主要作用是初始化data，掛載到this下。

3. initProvide(vm)

主要作用是初始化provide為子組件提供依賴。

4. callHook(vm, 'created')

作用是執行用戶定義的created鉤子函數，有mixin混入的也一并執行。

靈魂一問：請問methods 內的方法可以使用箭頭函數么？ 會產生怎樣的結果？

答案： 是不可以使用箭頭函數的， 因為箭頭函數的this是在定義時就綁定的。 在vue的內部， methods 內每個方法的上下文是當前的vm組件實例， methods[key].bind(vm)。 如果使用箭頭函數，函數的上下文就變成了父級的上下文， 也就是undefined了， 結果就是通過undefined 訪問任何變量都會報錯。

在created中，data和methods都已經初始化好了。最早也只能在created里調用methods方法和操作data數據。

另外注意

如果要在created階段中進行dom操作，就要將操作都放在 Vue.nextTick() 的回調函數中，因為created() 鉤子函數執行的時候 DOM 其實并未進行任何渲染，而此時進行 DOM 操作無異于徒勞，所以此處一定要將 DOM 操作的 js 代碼放進 Vue.nextTick() 的回調函數中。 一般我們最好不要在created里操作dom。

Vue.nextTick( [callback, context] )：在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。

3.渲染階段

3.1 編譯模板

從created到beforeMount的過程中，首先會判斷vue實例中有沒有el選項，如果有的話則進行下面的編譯，但是如果沒有el選項，則停止生命周期，直到vue實例上調用vm.$mount(el)。 如果有el，再判斷是否有template參數，如果有，則把其當作模板編譯成render函數，如果沒有，則把外部的html作為模板編譯。template中的模板優先級高于outer HTML模板。 在vue對象中還有一個render函數，它是以createElement作為參數，然后做渲染操作，而且我們可以直接嵌入JSX. 綜合排名優先級：render函數選項 > template選項 > outer HTML

3.2 beforeMount

此函數進行時，模板已經在內存中編譯好了，但是尚未掛載到頁面中去，此時，頁面還是舊的。

3.3 掛載

這一步，將內存中編譯好的模板，替換到瀏覽器的頁面中去。

3.4 mounted

這個節點表示整個vue實例已經初始化完畢了，此時組件已經脫離了創建-渲染階段，進入到運行階段。

4.運行階段

運行階段的生命周期函數式beforeCreate和created，這個兩個事件會根據數據data的改變，有選擇性的觸發0次或多次。

4.1 beforeUpdate

這個生命周期里，頁面中顯示的數據還是舊的，但是咱們data的數據是最新的，頁面尚未和最新的數據保持同步。

4.2 虛擬Dom重新編譯渲染

這一步執行的是：現根據data中最新的數據，在內存中，重新渲染出一份最新的內存DOM樹，?當最新的內存DOM樹 被更新之后， 會把最新的內存DOM樹，重新渲染到真是的頁面中去，這個時候就完成了數據從data(Mode層)=> View(視圖層）的更新。

4.3 Updated

updated執行時，頁面和data已經保持同步了，都是最新的。

5.銷毀階段

5.1 beforeDestory

當執行beforeDestory鉤子函數的時候，Vue實例就已經從運行階段進入到了銷毀階段：

這個時候，實例上所有的data和methods，以及過濾器、指令等等 都還處于?可用狀態，此時還沒有真正執行銷毀的過程。

5.2 destroyed

當執行到destroyed鉤子函數的時候，組件已經被完全銷毀了，此時Vue實例所有的data、methods、過濾器、指令... 都用不了。

總結：以上就是我所總結的對Vue生命周期的理解，也是參考了各方面的解釋，結合自己的理解，對Vue生命周期進行梳理。當梳理了之后，你會發現你對Vue會又更好的理解。

更多內容請訪問我的博客網站：http://www.jscwwd.com/article/5e65f4e249a13d1a89caf57c##toc412