一、各个生命周期的作用
Vue 的生命周期就是 Vue 实例从创建到销毁的过程，包括了它的初始化、渲染、更新、销毁等多个阶段。每个阶段 Vue 都会触发特定的生命周期钩子函数，让开发者有机会在不同的时间点执行代码。
首先在Vue生命周期中有十个阶段：
1 | 1、beforeCreate(创建前) |
在实例初始化之后，进行数据侦听和事件/侦听器的配置之前同步调用。因为data和methods中的数据都还没有初始化，常常在该阶段执行与Vue数据无关的事件，比如我们的loading等待事件。
这是 Vue 实例刚开始初始化的阶段，此时实例还没有创建，数据和事件都还未准备好，DOM 结构也还没生成。
1 | 2、created(创建后) |
在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且$el property目前尚不可用。
在该阶段已经完成data和methods的初始化了，只是页面还未渲染，可以在该阶段来发起请求获取数据等，以及操作data和调用methods等
Vue 实例已经创建好了，此时可以访问 data 和 methods，但 DOM 还没渲染。适合在这个阶段执行一些数据初始化或 Ajax 请求。
1 | 3、beforeMount(挂载前) |
在挂载开始之前被调用：相关的render函数首次被调用。该钩子在服务器端渲染期间不被调用
Vue 实例的模板已经编译好，准备将编译后的模板挂载到页面的 DOM 上，但 DOM 还未真正渲染。
1 | 4、mounted(挂载后) |
实例被挂载后调用，这时el被新创建的vm.$el替换了。如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el也在文档内。
注意mounted不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在mounted内部使用vm.$nextTick
该钩子在服务器端渲染期间不被调用
这时候Vue实例完成初始化，且挂载渲染到页面了，最早我们可以在这个阶段来操作页面上的DOM节点。
Vue 实例已经挂载到页面上，DOM 已经渲染完成，适合在这里进行与 DOM 相关的操作。
1 | 5、beforeUpdate(更新前) |
在数据发生改变后，DOM被更新之前被调用。这里适合在现有DOM将要被更新之前访问它，比如移除手动添加的事件监听器。
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行
该阶段此时实例中的数据已经是最新的啦，但是页面的还未更新
在数据发生变化并且即将重新渲染 DOM 前触发。在这个阶段，你可以看到旧的 DOM 状态，但还没有更新。
1 | 6. updated（更新后） |
- 数据更新完成，DOM 已经被重新渲染，适合执行需要与更新后的 DOM 交互的操作。
1 | 7. beforeDestroy（销毁前） |
- Vue 实例即将销毁，在这里可以进行一些清理操作，比如移除事件监听器或清除定时器。
1 | 8. destroyed（销毁后） |
- Vue 实例已经销毁，所有数据绑定、事件监听等都已经清除，DOM 结构也被移除了。