Vue生命周期函数

Vue生命周期函数

每一个Vue应用都是通过Vue函数创建一个新的Vue实例开始的，一个实例的创建于销毁就涵盖一个生命周期；
创建实例周期
beforeCreate(): 实例刚刚被创建出来，此时还没有初始化好data和methods属性；
created(): 实例的data与methods已经初始化，此时还没有开始编译模板；
beforeMount(): 完成了模板的编译，但是还没有挂载到页面上；
mounted():已经将编译好的模板挂载到指定的容器中；

var vm = new Vue({
        el:"#app",
        template:"<div>hello world</div>",
        beforeCreate :function () {
            console.log("beforeCreate");
        },
        created:function(){
            console.log("created");
        },
        beforeMount:function () {
            console.log(this.$el);
            console.log("beforeMount");
        },
        mounted:function () {
            console.log(this.$el);
            console.log("mounted");
        }
 }

运行结果

可以看出beforeMount时数据还未被渲染到模板上，而mounted时数据已经被完全渲染到页面上了；

运行实例周期
beforeUpdate()：状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据依然是旧的；
updated()：根据最新的数据重新渲染页面，此时data中的状态值和界面上显示的状态值一致；

beforeUpdate:function(){
     console.log(this.$el);
     console.log(beforeUpdate);
 },
 update:function () {
     console.log(this.$el);
      console.log(update);
 }

销毁实例周期
beforeDestroy()：实例准备销毁，但是实例的方法属性依然可以被调用；
destroyed()：实例已经被销毁，所有的属性和方法都不能被调用；

beforeDestroy:function () {
    console.log('beforeDestroy');
    console.log(this.$el);
},
destroyed:function () {
    console.log('destroy');
    console.log(this.$el);
}

生命周期函数在实际项目中的应用

created:进行ajax请求异步数据的获取；
mounted：挂载元素内dom节点的获取；
nextTick：针对单一事件更新数据后立即操作dom；
updated：任何数据的更新，如果要做统一的业务逻辑处理；
watch：监听具体数据变化，并做出相应的处理；