VueJS2.0 生命周期和鈎子函數的一些了解

所謂“生命周期”，是指對象從構造函數開始執行（被建立）到被gc回收銷毀的整個存在的時期。

“鈎子”就是在某個階段給你一個做某些處理的機會。

vuejs2.0的生命周期可以總共分為8個階段：

beforeCreate（建立前）,

created（建立後）,

beforeMount(載入前),

mounted（載入後）,

beforeUpdate（更新前）,

updated（更新後）,

beforeDestroy（銷毀前）,

destroyed（銷毀後）

生命周期鈎子的一些使用方法：

beforecreate : 可以在這加個loading事件，在加載執行個體時觸發 

created : 初始化完成時的事件寫在這裡，如在這結束loading事件，異步請求也适宜在這裡調用

mounted : 挂載元素，擷取到DOM節點

updated : 如果對資料統一處理，在這裡寫上相應函數

beforeDestroy : 可以做一個确認停止事件的确認框

nextTick : 更新資料後立即操作dom

this.$nextTick(() => {//$nextTick函數用于更新資料後立即操作dom,選中初始預設菜單
    //被選中菜單處理樣式
    let td = document.getElementsByClassName('menu-click')
    if (td) {//把先前的樣式置空
        for (let o of td) {
            o.setAttribute("class", "")
        }
    }
    let doc = document.getElementById(item.label)
    if (doc) {//重設定樣式
        doc = doc.setAttribute("class", "menu-click")
    }
})      

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)
}