vue生命周期的理解

如下圖為Vue官網（https://cn.vuejs.org/v2/guide/instance.html#實例生命周期）給出的生命周期圖示

光看圖或許不夠直觀，接下來就是一段代碼來加強理解。

 

mounted方法及其之前

dom部分：

<div id="app">
    <p>{{message}}</p>
</div>

js部分：

<script>
        var app = new Vue({
            el: '#app',
            data: {
              message : "some data" 
            },
            beforeCreate: function () {
                console.log('beforeCreate 創建前狀態===============》');
                console.log("%c%s", "color:red" , "el     : " + this.$el); 
                console.log("%c%s", "color:red","data   : " + this.$data);  
                console.log("%c%s", "color:red","message: " + this.message)  
            },
            created: function () {
                console.log('created 創建完畢狀態===============》');
                console.log("%c%s", "color:red","el     : " + this.$el); 
                console.log("%c%s", "color:red","data   : " + this.$data);  
                console.log("%c%s", "color:red","message: " + this.message); 
            },
            beforeMount: function () {
                console.log('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.log('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.log('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.log('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.log('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.log('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)
            }
        })
        </script>

以上代碼的運行結果為：

從運行結果可以看出來：

　　在beforeCreated階段，vue實例的掛載元素$el和數據對象data都為undefined，還未初始化，

　　在created階段，vue實例的數據對象data有了，$el還沒有，

　　在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換

　　在mounted階段，vue實例掛載完成，data.message成功渲染

 

update部分

在瀏覽器控制台中輸入 app.message = "new data"，會出現如下變化

可以發現，當data變化時，會觸發beforeUpdate和updated方法

 

destroy部分

在瀏覽器控制台中輸入app.$destroy()

此時再繼續修改message的值，在瀏覽器控制台輸入app.message = "change after destory"，你會發現：

因此，在執行destroy方法后，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在。