【老司機帶你飛】vue.js基礎入門教程（十二）

生命週期鉤子函數

從vue實例被創建到實例被銷燬，這個完整的聲明週期內，vue給我們提供了多個鉤子函數。

vue1.0+	vue2.0	描述
init	beforeCrete	組件實例被創建，組件計算屬性之前
created	created	組件實例創建完成，屬性已綁定，但DOM還未生成，$el屬性還不存在
compiled	beforeMount	模板編譯/掛載之前
compiled	mounted	模板編譯/掛載之後
ready	mounted	模板編譯/掛載之後（不保證組件已在document中）
-	beforeUpdate	組件更新之前
-	updated	組件更新之後
-	activated	for keep-alive,組件被激活時調用
-	deactivated	for keep-alive,組件被移除時調用
attached	-	不用了還說啥…
detached	-	那就不說了吧…
beforeDestory	beforeDestory	組件銷燬前調用
destoryed	destoryed	組件銷燬後調用

<div id="app">
    {{message}}
</div>
var app = new Vue({
    el:"#app",
    data:{
        message:"易動學院"
    },
    beforeCreate:function () {
        console.log("組件實例被創建之前");
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("message:"+this.message);
    },
    created:function () {
        console.log("組件實例之後")
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("message:"+this.message);
    },
    beforeMount:function () {
        console.log("模板編譯/數據掛載之前")
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("message:"+this.message);
    },
    mounted:function () {
        console.log("模板編譯/數據掛載之後")
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("message:"+this.message);
    },
    beforeUpdate:function () {
        console.log("組件更新之前")
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("message:"+this.message);
    },
    updated:function () {
        console.log("組件更新之後");
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("message:"+this.message);
    },
    beforeDestory:function () {
        console.log("組件銷燬之前");
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("message:"+this.message);
    },
    destoryed:function () {
        console.log("組件銷燬之後")
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("message:"+this.message);
    }
})

生命週期鉤子函數，大多用於各個階段的數據調試；比較常用的是created這個鉤子函數，如：應用在頁面加載給頁面準備數據。

QQ：732005030
掃碼加微信