VUE之生命周期钩子

什么是生命周期？

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称为Vue的生命周期。
通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。
概念图
①官方概念图

②对生命周期图的标注

钩子列表

beforeCreate
beforeCreate
官方描述：组件实例刚被创建，组件属性data、el等还未生效。
el 和 data 并未初始化
注意：this变量还不能使用，在data下的数据，和methods下的方法都不能获得到；

 beforeCreate:function() {
            console.group('------beforeCreate创建前------');
            console.log("%c%s","color:red",'el:'+this.$el);
            console.log("%c%s","color:red","data:"+this.$data);
            console.log("%c%s","color:red","meassage:"+this.messsage);
            console.groupEnd();
        }

created
created
官方描述：实例已经创建完成之后被调用，然而，挂载阶段还没开始，$el 属性目前不可见。
data已经初始化，但el并未初始化
完成了 data 数据的初始化，但el没有初始化，所以这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作；

created:function(){
            console.group('-----beforeCreate创建前----');
            console.log("%c%s","color:red",'el:'+this.$el);//undefined
            console.log("%c%s","color:red","data :" + this.$data);//undefined
            console.log("%c%s","color:red","message :" + this.$message);
            console.groupEnd();
        }

创建的标志点是New vue()，beforeCreate和created都发生在创建动作之后，但区别在于beforeCreate触发的时候数据还没初始化和绑定，而created的时候就生成好了，具体看看console的内容：


数据很明显，beforeCreate触发的时el、data都没初始化，但到created的时候虽然el依然没有初始化，但是data已经生成了，并且成功将message的值绑定上。

beforeMount

beforeMount
官方描述：在挂载开始之前被调用，完成了 el 和 data 初始化。
el 和 data 均已初始化 。

beforMount:function(){
            console.group('-----beforeMount挂载前的状态----');
            console.log("%c%s","color:red",'el:'+this.$el);//undefined
            console.log("%c%s","color:red","data :" + this.$data);//undefined
            console.log("%c%s","color:red","message :" + this.$message);
            console.groupEnd();
        }

在标红处，我们能发现el还是 { {message}}，这里就是应用的 Virtual DOM&#