你真的理解vue每个生命周期都做了什么?

84 阅读1分钟

首先,我们要了解vue3的生命周期,基础知识必须熟记!!! 123.png beforeCreate

  • 创建一个空白的Vue实例
  • data method尚未被初始化,不可使用

created

  • vue实例初始化完成,完成响应式绑定
  • data method都已经初始化完成,可调用
  • 尚未开始渲染模板

beforeMount

  • 编译模板,调用render渲染vdom

mounted

  • 完成dom渲染
  • 组件创建完成
  • 开始由“创建阶段”进入“运行阶段”

beforeUpdate

  • data发生变化之后
  • 准备更新DOM(尚未更新DOM)

updated

  • data发生变化,且DOM更新完成
  • 不要在updated中修改data,可能会导致死循环

beforeUnmount

  • 组件进入销毁阶段
  • 可移除、解绑一些全局事件、自定义事件

unmounted

  • 组件被销毁了
  • 所有子组件也都被销毁了

补充组件:

keep-alive组件

  • onActivated缓存组件被激活
  • onDeactivated缓存组件被隐藏

重点: vue生命周期必须掌握(不要眼高手低)

1、vue什么时候操作DOM比较合适?

mounted和updated都不能保证子组件全部挂载完成 使用$nextTick渲染DOM

2、ajax应该在哪个周期?

  • 有两个选择:created和mounted
  • 推荐:mounted
  • 区别:created并行/mounted串行

3、vue3 composition api生命周期有何区别?

  • 用setup代替了beforeCreate和created
  • 使用hooks函数的形式,如mounted改为onMounted()