Vue中生命週期的理解

代碼及結果截圖

HTML

<div id="app">
    <p>{{ message }}</p>
    <h1>{{message + '這是在outer HTML中的'}}</h1>
</div>

js

 var app = new Vue({
    el: '#app',
    data: {
        message : "xuxiao is boy"
    },
    template:"<h1>{{message +'這是在template中的'}}</h1>",
    // render: function(createElement) {
    //     return createElement('h1', 'this is createElement')
    // },
    beforeCreate: function () {
        console.group('beforeCreate 創建前狀態===============》');
        console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
        console.log("%c%s", "color:red","data   : " + this.$data); //undefined
        console.log("%c%s", "color:red","message: " + this.message)
    },
    created: function () {
        console.group('created 創建完畢狀態===============》');
        console.log("%c%s", "color:red","el     : " + this.$el); //undefined
        console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    beforeMount: function () {
        console.group('beforeMount 掛載前狀態===============》');
        console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    mounted: function () {
        console.group('mounted 掛載結束狀態===============》');
        console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    beforeUpdate: function () {
        console.group('beforeUpdate 更新前狀態===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data);
        console.log("%c%s", "color:red","message: " + this.message);
    },
    updated: function () {
        console.group('updated 更新完成狀態===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data);
        console.log("%c%s", "color:red","message: " + this.message);
    },
    beforeDestroy: function () {
        console.group('beforeDestroy 銷燬前狀態===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data);
        console.log("%c%s", "color:red","message: " + this.message);
    },
    destroyed: function () {
        console.group('destroyed 銷燬完成狀態===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data);
        console.log("%c%s", "color:red","message: " + this.message)
    }
})

最終結果

初始化階段

beforecreate

在這個階段，完成實例初始化，

初始化非響應式變量 this指向創建的實例； 

可以在這加個loading事件；

data computed watch methods上的方法和數據均不能訪問，這個時候的Vue實例還什麼都沒有，但是在這個階段$route對象是存在的，可以根據路由信息進行重定向之類的操作；

這個階段的data對象未完成初始化，el也沒有完成初始化；

DOM還沒有開始

created 【創建完成】

在模板渲染成HTML前調用，即通常初始化一些屬性值，然後再渲染成視圖， 未掛載DOM；created時還沒完成掛載，無法通過id等獲得DOM元素

實例創建完成 完成數據(data props computed)的初始化 導入依賴項。

可訪問data computed watch methods上的方法和數據 ；


不能訪問el【初始化還未完成】,ref爲空數組 ；不能對元素進行操作；

可在這結束loading，

還做一些初始化，實現函數自執行,

可以對data數據進行操作，可進行一些請求，請求不易過多，避免白屏時間太長。
el還是undefined，

而數據已經與data中的屬性進行綁定（放在data中屬性當值發生改變的同時，視圖也會發生變化），

在這裏可以在渲染前倒數第二次更改數據的機會，不會觸發其他的鉤子函數，**一般可以在這裏做初始數據的獲取**

**若在此階段進行的 DOM 操作一定要放在 Vue.nextTick() 的回調函數中；因爲created() 鉤子函數執行的時候 DOM 其實並未進行任何渲染**

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

模板編譯階段

beforemount & mount

在created後，beforemount前，會檢查el選項，沒有就會調用vm.$mount()，然後就會繼續檢查template，沒有的話就綁定el選項的html，進入beforemount後，編譯模板爲虛擬的DOM，，開始render，將虛擬DOM渲染到頁面上；

從created到beforeMount的過程中，

     var app = new Vue({
            el: '#app',
            data: {
                message : "xuxiao is boy"
            },
            template:"<h1>{{message +'這是在template中的'}}</h1>",
            // render: function(createElement) {
            //     return createElement('h1', 'this is createElement')
            // },

首先會判斷vue實例中有沒有el選項，如果有的話則進行下面的編譯，但是如果沒有el選項，則停止生命週期，直到vue實例上調用vm.$mount(el)。

如果有el，再判斷是否有template參數，如果有，則把其當作模板編譯成render函數，

如果沒有，則把外部的html作爲模板編譯。template中的模板優先級高於outer HTML模板。

這是把outerHTML當作模板編譯了

<div id="app">

<p>{{ message }}</p>
<h1>{{message + '這是在outer HTML中的'}}</h1>

</div>

如果把實例中render function選項的註釋去掉，則直接用render function裏的，得到網頁如下

所以按優先級來說 render function>template>outerHTML
————————————————

在vue對象中還有一個render函數，它是以createElement作爲參數，然後做渲染操作，而且我們可以直接嵌入JSX.
綜合排名優先級：render函數選項 > template選項 > outer HTML.

掛載階段

beforeMount【掛載之前】

載入前（完成了data和el數據初始化），

但是頁面中的內容還是vue中的佔位符，

$el屬性已存在，是虛擬dom，只是數據未掛載到模板中。

data中的message信息沒有被掛在到Bom節點中，

在這裏可以在渲染前最後一次更改數據的機會，不會觸發其他的鉤子函數，一般可以在這裏做初始數據的獲取

mounted 【成功掛載】

完成創建vm,

完成el的雙向綁定，完成掛載dom和渲染，可以在這個階段對掛載的DOM進行操作；

ref 可在這發起後端請求，拿回數據，配合路由鉤子做一些事情； 可對DOM 進行操作

載入後html已經渲染(ajax請求可以放在這個函數中)，把vue實例中的data裏的message掛載到BOM節點中去