-
• vue3 中父子组件的生命周期
-
• 挂载阶段 Mounting
-
• 更新阶段 Updating
-
• 卸载阶段 Unmounting
-
• 扩展：Vue 3 中组件的生命周期
-
• setup：
-
• 挂载阶段 Mounting
-
• onBeforeMountcallback：
-
• onMountedcallback：
-
• 更新阶段 Updating
-
• onBeforeUpdatecallback：
-
• onUpdatedcallback：
-
• 卸载阶段 Unmounting
-
• onBeforeUnmountcallback：
-
• onUnmountedcallback：
-
• 特定场景下的生命周期钩子
-
• onActivatedcallback 和 onDeactivatedcallback：
-
• nErrorCapturedcallback：
vue3 中父子组件的生命周期
在Vue 3中，父子组件的生命周期方法调用具有：
- 自上而下（挂载/更新）
- 自下而上（卸载）的特点，
确保了DOM操作的有序性和正确性。在 Vue 3 中，组件的生命周期经历挂载（Mounting）、更新（Updating）和卸载（Unmounting）三个主要阶段。
每个阶段都有一系列的钩子函数可以用来执行特定的逻辑。对于父子组件之间的生命周期交互，它们会遵循一定的顺序：
挂载阶段 (Mounting)
-
1. 父组件
-
•
setup(): Vue 3 引入的新组合式 API，用于取代以前的选项式API中的多个生命周期钩子，它在创建组件实例时同步执行。 -
•
beforeCreate/created: 在 Vue 2 中存在，但在 Vue 3 的组合式 API 中通常不需要，因为 setup() 可以直接初始化状态和副作用。 -
•
onBeforeMount: 在渲染或挂载开始之前调用。 -
•
onMounted: 组件被挂载到 DOM 后调用。 -
2. 子组件
-
• 同样按照上述顺序进行挂载，即先
setup()然后是onBeforeMount和onMounted。
挂载阶段的顺序：
-
• 先父组件的
onBeforeMount -
• 父组件的
setup() -
• 所有子组件按顺序依次经历各自的
setup()、onBeforeMount和onMounted -
• 最后父组件的
onMounted
更新阶段 (Updating)
-
1. 父组件
-
•
onBeforeUpdate: 在数据变化引起组件更新前调用。 -
•
onUpdated: 组件完成更新并重新渲染后调用。 -
2. 子组件
-
• 同样按照上述顺序进行更新，即先
onBeforeUpdate后onUpdated。
更新阶段的顺序：
-
• 当父组件数据变化触发重新渲染时，首先调用父组件的
onBeforeUpdate -
• 然后所有受影响的子组件按顺序依次调用各自的
onBeforeUpdate -
• 子组件完成更新后调用各自对应的
onUpdated -
• 最后父组件调用
onUpdated
卸载阶段 (Unmounting)
-
1. 子组件
-
•
onBeforeUnmount: 在组件从 DOM 中卸载之前调用。 -
•
onUnmounted: 组件已经被从 DOM 中卸载后调用。 -
2. 父组件
-
• 同样按照此顺序卸载，即先
onBeforeUnmount后onUnmounted。
卸载阶段的顺序：
-
• 当组件需要卸载时，先从最底层的子组件开始，依次调用每个子组件的
onBeforeUnmount和onUnmounted -
• 最终调用父组件的
onBeforeUnmount和onUnmounted
总结起来，在Vue 3中，父子组件的生命周期方法调用具有：
-
• 自上而下（挂载/更新）
-
• 自下而上（卸载）的特点，
确保了DOM操作的有序性和正确性。
扩展：Vue 3 中组件的生命周期
Vue 3 中组件的生命周期主要通过组合式API中的钩子函数来管理，与 Vue 2 中的选项式API相比，Vue 3 的生命周期更加灵活且简洁。以下是在 Vue 3 组件中使用的生命周期钩子：
挂载阶段 (Mounting)
setup()：
-
• 这是Vue 3引入的新核心API，用于替代
beforeCreate和created等旧生命周期方法。在创建组件实例时执行，并可以访问props、context和setup返回的对象（如果有）。
onBeforeMount(callback)：
-
• 在挂载开始之前调用，可用于初始化DOM操作所需的资源，但此时模板还未编译或挂载到DOM上。
onMounted(callback)：
-
• 当组件被挂载到DOM后调用，此时模板已经渲染完毕，可以在回调函数中进行DOM操作或访问组件的ref。
更新阶段 (Updating)
onBeforeUpdate(callback)：
-
• 在响应式数据变化触发组件更新前调用，可以在这个钩子中进行一些优化或者清理工作。
onUpdated(callback)：
-
• 组件完成更新并重新渲染后调用，此时可以访问到最新的DOM状态。
卸载阶段 (Unmounting)
onBeforeUnmount(callback)：
-
• 在组件从DOM中卸载前调用，用于释放组件持有的资源，如清除定时器、取消订阅等。
onUnmounted(callback)：
-
• 组件已经被卸载后调用，主要用于清理工作，确保没有内存泄漏。
特定场景下的生命周期钩子
另外，还有一些特定场景下的生命周期钩子：
onActivated(callback) 和 onDeactivated(callback)：
-
• 用于保持活动（Keep-alive）包裹的组件，在它们进入或离开缓存时调用。
nErrorCaptured(callback)：
-
• 错误边界功能，当捕获到子孙组件抛出的错误时调用。
在Vue 3中，这些生命周期钩子提供了更精细的控制粒度，使开发者能够更好地管理组件的整个生命周期过程。
同时，由于组合式API的特性，这些钩子通常会与reactive、ref、watch等API结合使用，以实现更为直观和高效的状态管理和逻辑处理。
原文始发于微信公众号（前端爱好者）：vue3.x学习笔记之项目实战 — 父子组件的生命周期
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/267203.html
