每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、
将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数
1. new Vue() 创建vue实例
2. Init Events & Lifecycle 初始化 事件 和 生命周期
Lifecycle Hocks 1: beforeCreate 创建前的状态
3.Init (初始化) injections (依赖注入) & reactivity (开始响应)
Lifecycle Hocks 2：created 创建完毕状态
4. 'el','template', 'render function' or 'as template' 是否有元素el，
是否有模板，是否渲染到了函数内，是否作为模板进行了outerHTML渲染到了页面
Lifecycle Hocks 3：beforeMount 挂载前状态
5. Create app.$el and replace 'el' with it 挂载我们的"#app"
并且还是把我们的‘#app’生成虚拟DOM，生成完毕后并渲染到view层。
Lifecycle Hocks 4：mounted 挂载结束状态
6. when data changes 当我们的数据发生了改变
Lifecycle Hocks 5：beforeUpdate beforeUpdate 更新前状态
7.Virtual DOM re-render and patch 虚拟Dom重渲染
Lifecycle Hocks 6：updated 更新完成状态
beforecreate：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化,虚拟DOM渲染
mounted ：完成挂载 挂载到真正的DOM上
以上只是理解，那上代码：
beforeCreate: 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)
},
created: function () { //请求后台数据放在此钩子函数下
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () { //在此钩子函数下可以操作DOM了
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
// 下面就能看到data里的值被修改后，将会触发update的操作。
beforeUpdate: function() {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el.innerHTML);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + JSON.stringify(this.$data));
console.log("%c%s", "color:red", "message: " + this.message);
console.groupEnd();
},
updated: function() {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el.innerHTML);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + JSON.stringify(this.$data));
console.log("%c%s", "color:red", "message: " + this.message);
console.groupEnd();
},
// 我们在console里执行下命令对 vue实例进行销毁。
// 执行命令：app.$destroy()
// 销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。
// 但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
