vue.js生命中周期钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

init(2.0改为beforeCreate)：实例开始初始化时同步调用，此时数据观测，事件等都未初始化。

created：在实例创建之后调用，此时已完成数据绑定，事件方法，但尚未开始DOM编译，即没有挂载到document中。

beforeCompile(2.0废弃)：在DOM编译前调用。

beforeMount(2.0新增)：在mounted之前运行。

compiled(2.0改为mounted)：在编译后调用，此时所有指令已生效，数据变化能触发DOM更新，但不保证$el已插入document。

ready(2.0废弃)：在编译结束和$el第一次插入文档后调用。2.0版本废弃该钩子，相当于取消了$el第一次插入文档的业务逻辑处理。

attached(2.0废弃)：在$el插入DOM时调用，read会在第一次attached后调用。值得注意的是，操作$el必须使用指令或实例方法，直接操作$el不会触发该钩子。

detached(2.0废弃)：够钩子在$el从DOM中删除时调用，而且必须是指令或实例方法。

beforeDestroy：在开始销毁实例时调用，此时实例依旧有效。

destroyed：在实例销毁之后调用。此时所有 绑定和实例指令都已经解绑，子实例也被销毁。

beforeUpdate(2.0新增)：在实例挂载之后，再次更新实例（例如更新data）时会调用，此时DOM结构尚未更新。

update(2.0新增)：在实例挂载之后，再次更新实例并且更新完DOM结构后调用。

activated(2.0新增)：需要配合动态组件keep-live属性使用，在动态组件初始化渲染的过程中调用该方法。

deactivated(2.0新增)：需要配合动态组件keep-live属性使用，在动态组件移出的过程中调用该方法。

 

ps:实例可以理解为“实际的案例”，下面的demo就是一个实例。

可以通过下面的小demo加深对vue1.x生命周期的理解，

var vm = new Vue({
    el:'#app',
    init:function(){
        console.log("init");
    },
    created:function(){
        console.log("created");
    },
    beforeCompile:function(){
        console.log("beforeCompile");
    },
    compiled:function(){
        console.log(" compiled");
    },
    attached:function(){
        console.log("attached");
    },
    dettached:function(){
        console.log("dettached");
    },
    beforeDestory:function(){
        console.log("beforeDestory");
    },
    destoryed:function(){
        console.log("destoryed");
    },
    ready:function(){
        console.log("ready");
        //组件完成后调用$destroy()函数进行销毁  `this` 指向 vm 实例
        this.$destroy();
    }
});

最后贴上vue2.0生命周期图示，钩子调用方式与1.x一致，详见官网文档。

https://cn.vuejs.org/v2/guide/instance.html