首先,我们要了解vue3的生命周期,基础知识必须熟记!!!
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()