小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
实例的生命周期
所有生命周期钩子的
this上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文，所以this不会指向预期的组件实例，并且this.fetchTodos将会是 undefined。
-
什么是实例的生命周期
- 所谓“生命周期”，是指实例对象从构造函数开始执行（被创建）到被GC（Garbage Collection：垃圾回收）回收销毁的整个存在的时期
-
什么是生命周期钩子
- 在生命周期中被自动调用的函数叫做生命周期函数，也被形象的称为钩子函数
#这里是我们第一次接触生命周期的感念：和人一样，人从出生一直到到最后的死亡，要经历很多个时期，比如童年、少年、青年、中年、老年等等，同理我们的实例也是有类似这样的一个周期，
-
生命周期钩子的用途
- 在对象从创建到被回收的整个过程中会在不同的时期有不同的钩子函数，我们可以利用不同时期的钩子函数去完成不同的操作
-
钩子函数有哪些
- beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
-
生命周期函数 含义 beforeCreate（创建前） 组件实例刚被创建，只有一些声明周期函数和默认事件，data和methods中的数据还没有初始化【加一些loading事件】 created（创建后） 组件实例刚创建完成，属性已经绑定，当时DOM还未生成，$el属性还不存在【结束loading事件，还做一些初始化，实现函数自执行等】 beforeMount(挂载前) 模板编译、挂载之前 mounted（挂载后） 模板编译、挂载之后【发起后端请求，取回数据接收页面之间传递的参数子组件向父组件传递参数】 beforeUpdate（更新前） 组件更新之前 updated（更新后） 组件更新之后 beforeDestroy（销毁前） 组件销毁前调用 destroyed（销毁后） 组件销毁后调用
钩子函数图解
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
/*// 生命周期的写法需要注意，适合data在一个级别的
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("el: " + this.$el); //undefined
console.log("data: " + this.$data); //undefined
console.log("message: " + this.message) //undefined
// 在这个时期 ,说明 el 和 data 并未初始化
// 这个时候做的操作,例如:加一些loading事件
},
created: function() {
console.group('------created创建完毕状态------');
console.log("el: " + this.$el); //undefined
console.log("data: " + this.$data); //已被初始化
console.log("message: " + this.message); //Vue的生命周期,说明已被初始化
// 这个时期,data 数据已经初始化，但是 el没有
// 这个时候可以做的操作例如:结束loading事件，还做一些初始化，实现函数自执行等
},*/
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("el: " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("data: " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
// 到这个时期,data 和 el 都已经 初始化
},
mounted: function() {
console.group('------mounted 挂载后状态------');
console.log("el: " + this.$el); //已被初始化
console.log(this.$el);
console.log("data: " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
// 完成挂载，这个生命周期用的是比较多的
// 最常见的就是:1、发起后端请求，拿回数据 2、接收页面之间的传递的参数 3、子组件向父组件传递参数
},
beforeUpdate: function () {
console.group('------beforeUpdate 更新前状态------');
console.log("el: " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
updated: function () {
console.group('------updated 更新后状态------');
console.log("el: " + this.$el);
console.log(this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
// 当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。我们在console中输入 vm.message = '触发组件更新'
// 这里就比较好理解了：当希望更新组件前做一些操作的时候，我们就可以调用 beforeUpdate钩子函数，同理使用 updated 钩子函数
},
beforeDestroy: function () {
console.group('------beforeDestroy 销毁前状态------');
console.log("el: " + this.$el);
console.log(this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
// beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
},
destroyed: function () {
console.group('------destroyed 销毁后状态------');
console.log("el: " + this.$el);
console.log(this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
// destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
}/**/
})
