浅谈VUE的生命周期

86 阅读2分钟

我们知道,一个vue组件的生命周期可以分为初始化阶段,更新阶段以及卸载阶段

初始化阶段

  1. beforeCreate
    • 创建之前初始化生命周期或自定义事件,注入数据代理和数据劫持。这个阶段vue实例刚刚在内存中创建,此时data和methods都还没初始化好
  2. created
    • 创建之后vue实例在内存中已经创建好了,data和methods也能够获取到,但模版还未编译。此时可以发送请求,发送时机更早,数据回来更快。注意不要做复杂耗时的操作,否则由于js引擎解析的特点,会导致页面的解析和渲染延迟
  3. beforeMount
    • 挂载之前这个阶段,模版编译完成,但还未挂载到页面上,准备挂载组件,将template字符串转换成render函数,通过render函数生成虚拟dom
  4. mounted
    • 挂载之后,虚拟dom生成真实dom,页面显示。可以发请求,首屏展示更快,会先展示初始页面,再发请求。可以操作真实dom。比如创建swiper实例,实现轮播图,可以绑定事件总线,绑定自定义事件

更新阶段

  1. beforeUpdate
    • 更新之前,此时data中数据的状态值已经更新为最新的,但页面上显示的数据还是原始的,还没有重新开始渲染dom树
  2. updated
    • 更新之后,此时data中数据的状态值是最新的,页面上显示的数据也是最新的,dom节点已经被重新渲染了

卸载阶段

  1. beforeDestroy
    • 卸载之前,vue实例还能用。需解绑事件监听,解绑事件总线
  2. destroyed
    • 卸载之后,此时所有实例指示的所有东西都会解绑,事件监听器也移除,子实例也被销毁

配合keep-alive进行组件缓存的生命周期

  1. activated:组件激活
  2. deactivated:组件失活

捕获后代组件错误

  • errorCaptured

思考一下,如果是父子组件,那么它们的生命周期是怎样的执行顺序呢?