vue學習——lifycycle

這一章主要介紹vue實例的生命週期（lifycycle）

主要介紹一下幾點：

1. 有哪些生命週期鉤子？
2. 生命週期的執行順序以及觸發條件。
3. 不同生命週期中vue實例的不同（着重官職vm.$el和vm.$data變化）

首先貼圖，官方例子lifycycle的圖：

標題

依據這個生命週期圖例以及vue官方文檔的介紹，做了關於生命週期的小例子

   var vm = new Vue({
        el: "#app",
        template: `<div>{{massage}} : {{text}}</div>`,
        data: {
            massage: "hello vue!",
            text: 0
        },
        beforeCreate() {
            console.group("beforeCreate");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        created() {
            console.group("created");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        beforeMount() {
            console.group("beforeMount");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        mounted() {
            console.group("mounted");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        beforeUpdate() {
            console.group("beforeUpdate");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        updated() {
            console.group("updated");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        activated() {
            console.group("activated");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        deactivated() {
            console.group("deactivated");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        beforeDestroy() {
            console.group("beforeDestroy");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        destroyed() {
            console.group("destroyed");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        }
    })

先來觀察一下輸出結果：

從上面的結果中可以得出結論：

在vue實例構建的過程中依次調用的生命週期鉤子順序：

beforeCreate ==> created ==> beforeMount ==> mounted。

beforeUpdate和updated鉤子 顧名思義需要在vue 響應式對象（data數據）發生改變時纔會調用

beforeDestroy和destroyed鉤子則是在vue實例銷燬的時候纔會調用。小知識：ue實例銷燬方法：vm.$destory() //一般不會用到

activated和deactivated鉤子是在keep-alive激活時候調用，待到組件部分詳細介紹。

以上已經解決了第一二兩個問題。第三個問題還得看這張輸出圖：

首先來看vm.$data的值

可以看出在created開始data的值就是可以訪問的，所以在vue實例化過程中，如果需要對data的值進行處理，可以放在created中。

首先來vm.$el的值

在beforeCreated和created中vm.$el的值都是undefined

在beforeMount中vm.$el的值是vue示例掛載的DOM節點

而在mounted開始vm.$el的值就是vue template中的值。

所以得出結論：如果需要改變template，則需要將操作放在mounted

接下來再做一個實驗，如果在vue實例化的過程中未指定掛載的DOM節點會發生什麼：

    // el:"#app",   //其他都不變，註釋掉el
    template: `<div>{{massage}} : {{text}}</div>`,
        data: {
        massage: "hello vue!",
            text: 0
    },

這時候輸出結果：

發現這時候只執行了beforeCreate和created的鉤子，並沒有往下繼續執行，這是因爲vue實例化的時候沒有指定掛載的節點，它會等待掛載，就是生命週期圖中所表示的一樣（下圖紅框部分）

這個時候我們再掛載一下就好了，vue實例掛載方法：vm.$mount("#app")