vue学习——lifycycle

这一章主要介绍vue实例的生命周期（lifycycle）

主要介绍一下几点：

1. 有哪些生命周期钩子？
2. 生命周期的执行顺序以及触发条件。
3. 不同生命周期中vue实例的不同（着重官职vm.$el和vm.$data变化）

首先贴图，官方例子lifycycle的图：

标题

依据这个生命周期图例以及vue官方文档的介绍，做了关于生命周期的小例子

   var vm = new Vue({
        el: "#app",
        template: `<div>{{massage}} : {{text}}</div>`,
        data: {
            massage: "hello vue!",
            text: 0
        },
        beforeCreate() {
            console.group("beforeCreate");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        created() {
            console.group("created");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        beforeMount() {
            console.group("beforeMount");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        mounted() {
            console.group("mounted");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        beforeUpdate() {
            console.group("beforeUpdate");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        updated() {
            console.group("updated");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        activated() {
            console.group("activated");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        deactivated() {
            console.group("deactivated");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        beforeDestroy() {
            console.group("beforeDestroy");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        },
        destroyed() {
            console.group("destroyed");
            console.log(this.$el);
            console.log("data:" + JSON.stringify(this.$data));
            console.groupEnd();
        }
    })

先来观察一下输出结果：

从上面的结果中可以得出结论：

在vue实例构建的过程中依次调用的生命周期钩子顺序：

beforeCreate ==> created ==> beforeMount ==> mounted。

beforeUpdate和updated钩子 顾名思义需要在vue 响应式对象（data数据）发生改变时才会调用

beforeDestroy和destroyed钩子则是在vue实例销毁的时候才会调用。小知识：ue实例销毁方法：vm.$destory() //一般不会用到

activated和deactivated钩子是在keep-alive激活时候调用，待到组件部分详细介绍。

以上已经解决了第一二两个问题。第三个问题还得看这张输出图：

首先来看vm.$data的值

可以看出在created开始data的值就是可以访问的，所以在vue实例化过程中，如果需要对data的值进行处理，可以放在created中。

首先来vm.$el的值

在beforeCreated和created中vm.$el的值都是undefined

在beforeMount中vm.$el的值是vue示例挂载的DOM节点

而在mounted开始vm.$el的值就是vue template中的值。

所以得出结论：如果需要改变template，则需要将操作放在mounted

接下来再做一个实验，如果在vue实例化的过程中未指定挂载的DOM节点会发生什么：

    // el:"#app",   //其他都不变，注释掉el
    template: `<div>{{massage}} : {{text}}</div>`,
        data: {
        massage: "hello vue!",
            text: 0
    },

这时候输出结果：

发现这时候只执行了beforeCreate和created的钩子，并没有往下继续执行，这是因为vue实例化的时候没有指定挂载的节点，它会等待挂载，就是生命周期图中所表示的一样（下图红框部分）

这个时候我们再挂载一下就好了，vue实例挂载方法：vm.$mount("#app")