vue的生命周期是什么
- 当vue被创建的时候有自己的生命周期，就像Java的对象被创建的时候一样，有着自己的生命周期。
- new一个vue对象以后，就有了创建、数据初始化、挂载、更新、销毁这些生命周期。
- 而vue允许我们在这期间使用钩子函数来做更多的事情。
- 如： b e f o r e C r e a t e 、 c r e a t e d 、 b o f o r e M o u n t 、 m o u n t e d （ b e f o r e U p d a t e 、 u p d a t e d ） 、 b e f o r e D e s t r o y 、 d e s t r o y e d beforeCreate、created、boforeMount、mounted（beforeUpdate、updated）、beforeDestroy、 destroyed beforeCreate、created、boforeMount、mounted（beforeUpdate、updated）、beforeDestroy、destroyed
- 值得强调的是，很多钩子函数在生命周期中只能被调用一次，有些可以被多次调用，如beforeCreate就只被调用一次。
首先构造函数生成vue实例 ↓
事件和生命周期钩子初始化。 ↓
这时钩子函数 b e f o r e C r e a t e beforeCreate beforeCreate被调用；也就是说在实例初始化之后，数据观测 （ d a t a o b s e r v e r ） 和 e v e n t / w a t c h e r （data observer）和event/watcher （dataobserver）和event/watcher事件卑职之前被调用。 ↓
new Vue({
el: '#app',
data: {
},
beforeCreate: function () {
console.log('beforeCreate');
}
})
接着初始化inject provide state属性 。 ↓
接下来create钩子函数被调用；它在实例创建完成之后被立即调用；在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的运算，watch/event的事件回调；然而，挂载阶段还没有开始，$el属性目前不可见。 ↓
new Vue({
el: '#app',
data: {
},
created: function(){
console.log('created');
},
})
判断是否有el对象，如果有继续判断是否有模板，如果没有就挂载对象、然后在判断是否有模板。 ↓
如果有模板，就把模板转化为render函数，通过render函数去渲染创建dom数；
如果没有模板，就编译el对象外层html作为模板；
这时钩子函数beforeMount被运许调用，它在被挂载前被调用render函数首次被调用生成虚拟的dom。也就是说在挂载开始之前被调用：先关的渲染函数首次被调用。 ↓
new Vue({
el: '#app',
data: {
},
beforeMount:function(){
console.log('beforeMount')
}
})
接下来创建vue实例下的$el(虚拟) 并将其替换真正的dom； ↓
钩子函数mounted被允许调用；挂载完成，dom树已经完成渲染到页面，可进行dom操作；
el 被新创建的 vm.$el 替换，挂载成功； ↓
new Vue({
el: '#app',
data: {
},
mounted:function(){
console.log('mounted')
}
})
当数据有被更新的时候调用钩子函数beforeUpdate 或者 更新以后调用钩子函数updated。 ↓
更新数据时调用 ：
new Vue({
el: '#app',
data: {
},
beforeUpdate:function(){
console.log('beforeUpdate')
}
})
组件dom 已经更新，组件更新完毕调用：
new Vue({
el: '#app',
data: {
},
updated:function(){
console.log('updated')
}
})
在生命周期销毁之前还可以调用访问实例的数据，需要调用钩子函数beforeDestory； ↓
new Vue({
el: '#app',
data: {
},
beforeDestory:function(){
console.log('beforeDestory')
}
})
销毁的时候需要做，清除watcher、子组件事件监听器等… ↓
销毁以后可以调用destroyed钩子函数，之后整个生命周期就结束了。 ↓
new Vue({
el: '#app',
data: {
},
destroyed:function(){
console.log('destroyed')
}
})
