我们知道,一个vue组件的生命周期可以分为初始化阶段,更新阶段以及卸载阶段
初始化阶段
- beforeCreate
- 创建之前初始化生命周期或自定义事件,注入数据代理和数据劫持。这个阶段vue实例刚刚在内存中创建,此时data和methods都还没初始化好
- created
- 创建之后vue实例在内存中已经创建好了,data和methods也能够获取到,但模版还未编译。此时可以发送请求,发送时机更早,数据回来更快。注意不要做复杂耗时的操作,否则由于js引擎解析的特点,会导致页面的解析和渲染延迟
- beforeMount
- 挂载之前这个阶段,模版编译完成,但还未挂载到页面上,准备挂载组件,将template字符串转换成render函数,通过render函数生成虚拟dom
- mounted
- 挂载之后,虚拟dom生成真实dom,页面显示。可以发请求,首屏展示更快,会先展示初始页面,再发请求。可以操作真实dom。比如创建swiper实例,实现轮播图,可以绑定事件总线,绑定自定义事件
更新阶段
- beforeUpdate
- 更新之前,此时data中数据的状态值已经更新为最新的,但页面上显示的数据还是原始的,还没有重新开始渲染dom树
- updated
- 更新之后,此时data中数据的状态值是最新的,页面上显示的数据也是最新的,dom节点已经被重新渲染了
卸载阶段
- beforeDestroy
- 卸载之前,vue实例还能用。需解绑事件监听,解绑事件总线
- destroyed
- 卸载之后,此时所有实例指示的所有东西都会解绑,事件监听器也移除,子实例也被销毁
配合keep-alive进行组件缓存的生命周期
- activated:组件激活
- deactivated:组件失活
捕获后代组件错误
- errorCaptured