生命周期
生命周期就是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
总结:子组件事情做完之后 父组件才可以完成