vue生命周期
生命周期的钩子一共分为8个阶段：创建前后、载入前后、更新前后、销毁前后
创建前/后:
- beforeCreate（创建前）：vue实例的挂载元素$el和数据对象 data都是undefined, 还未初始化
- created (创建后) ：实例创建完成后，完成了 data数据初始化, 但是el还未初始化。
载入前/后：
- beforeMount (载入前)： vue实例的$el和data都初始化了, 相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
- mounted (载入后) ：在el 被新创建的 vm.$el替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。
更新前/后：
- beforeUpdate (更新前)： 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程
- updated （更新后） ：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。
销毁前/后：
- beforeDestroy (销毁前） ：在实例销毁之前调用。实例仍然完全可用。
- destroyed (销毁后） ：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。
当组件被keep-alive包裹时，会多出两个钩子
- activated 组件激活时调用。
- deactivated 组件停用时调用。
父子组件的生命周期
- 加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
- 子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
- 销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
| 生命周期 | 描述 |
|---|---|
| beforeCreate | 组件实例被创建之初，组件的属性生效之前，实例刚在内存中被创建出来，此时，还没有初始化好data 和 methods 属性 |
| created | 组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用 |
| beforeMount | 在挂载开始之前被调用：相关的 render 函数首次被调用 |
| mounted | el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子 |
| beforeUpdate | 组件数据更新之前调用，发生在虚拟 DOM 打补丁之前 |
| updated | 组件数据更新之后 |
| activited | keep-alive 专属，组件被激活时调用 |
| deactivated | keep-alive 专属，组件被销毁时调用 |
| beforeDestory | 组件销毁前调用 |
| destoryed | 组件销毁后调用 |
