Vue2生命週期

這是Vue文檔裡關於執行個體生命週期的解釋圖
那麼下面我們來進行測試一下

<section id="app-8">    {{data}}</section>var myVue=new Vue({        el:"#app-8",        data:{            data:"aaaaa",            info:"nono"        },        beforeCreate:function(){            console.log("建立前========")            console.log(this.data)            console.log(this.$el)        },        created:function(){            console.log("已建立========")            console.log(this.info)            console.log(this.$el)        },        beforeMount:function(){            console.log("mount之前========")            console.log(this.info)            console.log(this.$el)        },        mounted:function(){            console.log("mounted========")            console.log(this.info)            console.log(this.$el)        },        beforeUpdate:function(){            console.log("更新前========");        },        updated:function(){            console.log("更新完成========");        },        beforeDestroy:function(){            console.log("銷毀前========")            console.log(this.info)            console.log(this.$el)        },        destroyed:function(){            console.log("已銷毀========")            console.log(this.info)            console.log(this.$el)        }    })

代碼如上，瀏覽器開始負載檔案

由上圖可知：
　　1、beforeCreate 此時$el、data 的值都為undefined
　　2、建立之後，此時可以拿到data的值，但是$el依舊為undefined
　　3、mount之前，$el的值為“虛擬”的元素節點
　　4、mount之後，mounted之前，“虛擬”的dom節點被真實的dom節點替換，並將其插入到dom樹中，於是在觸發mounted時，可以擷取到$el為真實的dom元素()
　　myVue.$el===document.getElementById("app-8") // true
接著，在console中修改data，更新視圖

觸發beforeUpdata 和updated，接著，執行myVue.$destroy()。

總結一下，對官方文檔的那張圖簡化一下，就得到了這張圖：

轉載地址：http://www.cnblogs.com/gagag/p/6246493.html