Vue 的生命周期钩子

首先介绍一下关键的几个生命周期

beforeCreate:实例  初始化之后  调用
     created:实例  创建完成后  被立即调用，挂载阶段还没开始

 beforeMount:在  挂载  开始之前  被调用，render首次调用（渲染）
    mounted:实例  挂载  后  调用
注：等整个试图都渲染完毕，在 mounted 内部使用 vm.$nextTick

 beforeUpdate:数据  更新时  调用;手动移除已添加的事件监听器
     updated:数据  更新后  调用；
注：等整个试图都渲染完毕，在 update 内部使用 vm.$nextTick

 actived:被 keep-alive 缓存的组件  激活  时调用
deactivated:被 keep-alive 缓存的组件  停用  时调用
该钩子在 服务器端渲染器件不被调用

 beforeDestroy:实例销毁  前  调用
    destroyed:实例销毁  后  调用
该钩子在 服务器端渲染器件不被调用

一起来看看 几个生命周期的内容吧

<div id="app">{
   
   {name  + age + msg}}</div>


<script>
    var vm = new Vue ({
        el:"#app",
        data:{
            name : "生命周期钩子 ",
            age :23,
            msg: " 异常优秀"
        },
        beforeCreate:function(){          //初始化之后调用
            console.log("beforeCreate");
            console.log(this);           //Vue 本身,生命周期中所有的 this 都是Vue 本身
            console.log(this.$data);     //undefined
        },
        created:function(){             //实例创建完成后调用，data !== undefined
            console.log("created");
            console.log(this.$data);    //Object
            console.log(this.$el);      //undefined
        },
        beforeMount:function(){         //实例挂载 之前 被调用
            console.log("beforeMount");
            console.log(this.$data);    //Object
            console.log(this.$el);      //body 中标签的模样
        },
        mounted:function () {           //实例挂载 之后 被调用
            console.log("mounted");
            console.log(this.$data);    //Object
            console.log(this.$el);      //加了内容的标签
        },
        beforeUpdate:function () {
            console.log("beforeUpdate");
        },
        updated:function () {
            console.log("updated");
        }
    })
</script>