6.Vue3 生命周期

141 阅读2分钟

生命周期

生命周期就是Vue在初始化应用的时候,给我们在特定时期调用的一些回调函数,我们可以在这些回调函数中做一些事情。

1.beforeCreate -> 使用setup()

2.created -> 使用setup()

3.onBeforeMount – 在挂载开始之前被调用:相关的 render 函数首次被调用。

4.onMounted – 组件挂载时调用

5.onBeforeUpdate – 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。

6.onUpdated – 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

7.onBeforeUnmount – 在卸载组件实例之前调用。在这个阶段,实例仍然是完全正常的。

8.onUnmounted – 卸载组件实例后调用。调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。

9.onActivated – 被 keep-alive 缓存的组件激活时调用。

10.onDeactivated – 被 keep-alive 缓存的组件停用时调用。

11.onErrorCaptured – 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

Vue3 调试钩子

1.onRenderTracked

组件第一次渲染时记录

跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。

2.renderTracked

组件重新渲染时记录 当虚拟 DOM 重新渲染为 triggered.Similarly 为renderTracked,接收 debugger event 作为参数。此事件告诉你是什么操作触发了重新渲染,以及该操作的目标对象和键。

父子组件之间生命周期调用关系

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

总结:子组件事情做完之后 父组件才可以完成