vue的生命週期函數

轉載自 http://www.cnblogs.com/gagag/p/6246493.html

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

 

代碼如上，瀏覽器開始加載文件

 

 

 

 

由上圖可知：

　　一、beforeCreate 此時$el、data 的值都爲undefined

　　二、建立以後，此時能夠拿到data的值，可是$el依舊爲undefined

　　三、mount以前，$el的值爲「虛擬」的元素節點

　　四、mount以後，mounted以前，「虛擬」的dom節點被真實的dom節點替換，並將其插入到dom樹中，因而在觸發mounted時，能夠獲取到$el爲真實的dom元素()

　　myVue.$el===document.getElementById("app-8")  // true

 

接着，在console中修改data，更新視圖

 

 

 　　觸發beforeUpdata 和updated

 

　　接着，執行myVue.$destroy()

 

 

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

 

 文章中如有錯誤請指出，轉載請註明出處，謝謝~