vue生命周期及其作用
1. 生命周期总览
2. beforeCreate
- 我们在new Vue()时，初始化一个Vue空的实例对象，此时对象身上只有默认的声明周期函数和事件，此时data,methods都未被初始化
3. created
- 此时，已经完成数据观测，属性和方法的运算，watch、event事件回调的配置
- 可以调用methods中的的方法，访问和修改data数据出发响应式渲染dom，可以通过compute和watch完成数据计算
- 此时，vm.$el并没有被创建
4. created->beforeMounted
- 判断是否存在el选项，如果不存在，则停止编译，直到调用vm.$mount（el）才会继续编译
- vm.el获取到的事挂载DOM的
5. beforeMount
- 此时可以获取到vm.el
- vm.el已完成DOM初始化，但未挂载到el选项上
6. beforeMount->Mounted
- 此阶段vm.el完成挂载，vm.￥el生成的DOM替换了el选项所对应的DOM
7. Mounted
- vm.el已完成DOM的挂载和渲染，
8. beforeUpdate
- 更新的数据必须是被渲染在模板上的
- 此时view层还没有更新
9. updated
- 完成view层的更新
10. beforeDestroy
- 实例被销毁前调用，此时实例属性与方法仍可访问
11. destroyed
- 完全销毁一个实例，仅销毁实例，并不能清楚DOM
12. 总结
| 生命周期 | 描述 |
|---|---|
| beforeCreate | 执行时组件实例还未被创建，可用于插件开发中执行一些初始化任务 |
| created | 组件初始化完毕，各种数据可以使用，常用于异步数据获取 |
| beforeMount | 未执行渲染、更新，dom未创建 |
| mounted | 初始化结束，DOM已经创建，可用于获取访问数据和DOM元素 |
| beforeUpdate | 更新前，可用于获取更新前各种状态 |
| updated | 更新后，所有状态意识最新 |
| beforeDestroy | 销毁前，可用于一些定时器清楚或者订阅的取消 |
| destroyed | 组件已销毁 |
13. created和mounted数据请求的区别
- created是在实例创建完成之后立刻调用，这时候dom节点未生成，如果进行数据请求，后续在mounted时就一次性渲染结束
- mounted是在dom挂载完立刻执行，这时候如果再进行数据请求，可能会发生回流和重绘，页面会闪动
- 所以，数据请求一般放在created中