【轻松学vue】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:"vue真好玩"
    },
    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
扫码加微信