「这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战」
Vue生命周期的简单理解
Vue生命周期
生命周期就是 vue 组件 从开始创建到销毁所经历的全过程，主要分为四个大的步骤。
- 创建 created
- 挂载 mounted
- 更新 updated
- 销毁destroyed 每一个大步骤又分为两个步骤，分别是执行前（beforexxx）和完成后（xxxed），如 beforeCreate，created。 在不同的生命周期，vue组件的属性和事件会逐渐可用。可以在对应的生命周期执行相应的操作。
作用
beforeCreate 前，也就是 new Vue 的时候会初始化事件和生命周期；beforeCreate 和 created 之间会挂载 Data，绑定事件；接下来会根据 el 挂载页面元素，如 果没有设置 el 则生命周期结束，直到手动挂载；el 挂载结束后，根据 templete/outerHTML(el)渲染页面；在 beforeMount 前虚拟 DOM 已经创建完 成；之后在 mounted 前，将 vm.$el 替换掉页面元素 el;mounted 将虚拟 dom 挂载到真实页面（此时页面已经全部渲染完成）；之后发生数据变化时 触发 beforeUpdate 和 updated 进行一些操作；最后主动调用销毁函数或者 组件自动销毁时 beforeDestroy，手动撤销监听事件，计时器等；destroyed 时仅存在 Dom 节点，其他所有东西已自动销毁。
beforeCreate：创建Vue组件实例前的钩子函数。可以执行一些初始化的操作。
之间：初始化data和method，依赖注入和校验
created：Vue组件实例创建完成之后的钩子函数。属性已经绑定，但是$el属性还不存在，DOM未生成，页面还没有被展示。
beforeMount：虚拟DOM配置已完成，模板已编译，根据组件的数据和模板生成html。还没有将生成的html挂载到页面上。
之间： 用编译好的html对象替换el属性指向的DOM对象。
mounted：将编译好的html挂载到页面之后触发的钩子函数。这个过程中DOM结构已挂载，页面显示出来。
beforeUpdate： 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
之间： 重新渲染虚拟DOM并通过diff算法对比vnode节点差异，更新真实DOM
updated： 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。updated调用时，页面和data数据已经同步，都是最新的状态，可以执行依赖DOM的操作。
然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy：在实例销毁之前调用。此时还没有真正执行销毁过程，实例仍然完全可用。
之间：解除绑定，销毁子组件以及事件监听器。
destroyed：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用
这里用一个表格展示属性和方法的可用性
0：不可用
1：可用
| 属性和方法 | $el | $data | method |
|---|---|---|---|
| beforeCreate | 0 | 0 | 0 |
| created | 0 | 1 | 1 |
| beforeMount | 1 | 1 | 1 |
| mounted | 1 | 1 | 1 |
| beforeDestroy | 1 | 1 | 1 |
| destroyed | 0 | 0 | 0 |
