参考网址： https://www.cnblogs.com/Syinho/p/12482012.html
什么是生命周期函数
在vue实例化过程中的某个时间点会自动触发的函数
生命周期的三个阶段及相关的钩子
创建阶段
beforeCreate
created
beforeMount
mounted
运行阶段
- beforeUpdate
- updated
销毁阶段
- beforeDestroy
- destroyed
每个生命周期函数的特点
beforeCreate
创建之前，在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化，不能访问data数据
beforeCreate(){
console.log('beforeCreate',this.msg);
},
created
创建之后，data和methods中的数据已经初始化，此时可以访问data数据
一般在这个函数中发起ajax请求
created(){
console.log('created',this.msg);
},
beforeMount
挂载之前，表示模板已经在内存中编译完成，但尚未把模板渲染到页面中。
此时还没有渲染用数据生成的新dom
beforeMount(){
console.log('beforeMount',this.$el);
},
mounted
表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
此时可以访问dom
mounted(){
console.log('mounted',this.$el);
},
beforeUpdate
当且仅当data被修改时才触发这个生命周期函数，但此时仅仅是数据被修改，页面还未更新。
如果修改的data数据并没有在模板中使用，也不会触发更新
beforeUpdate(){
console.log('beforeUpdate',this.msg);
console.log('beforeUpdate',this.$el.innerHTML);
},
updated
会根据新数据生成最新的内存DOM树，重新渲染到真实的页面中去，此时的data数据和页面已完成同步
updated(){
console.log('updated',this.$el.innerHTML);
},
beforeDestroy
当执行beforeDestory钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段。
当执行beforeDestory的时候，实例身上所有的data和所有的methods，以及过滤器、指令...都处于可用状态，此时还没有真正执行销毁过程。
beforeDestroy(){
console.log('beforeDestroy');
},
destroyed
当执行到destoryed函数的时候，组件已经被全部销毁了，data与methods均不可用。
更改data数据，页面不会更新
destroyed(){
console.log('destroyed');
}
