VUE 子父传参触发生命周期 全篇

1.项目当中经常设计子组件和父组件接口触发的时间点，那我们细谈一下触发的生命周期

vue2

组件的生命周期：

• 挂载（初始化相关属性）
• 1.beforeCreate
• 2.created
• 3.beforeMount
• 4.mounted
• 更新（元素或组件的变更操作
• 1.beforeUpdate
• 2.updated
• 销毁（销毁相关属性）
• 1.beforeDestroy
• 2.destroyed

 2.

一个完整的父子组件生命周期：

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

3.在Vue3中，一些常见的钩子函数发生了变化。例如，vue2中的created和beforeCreate钩子函数被替换为了setup()，并且setup()在二者之前执行。beforeMount和mounted函数被替换成了onBeforeMount和onMounted。beforeUpdate 和update被替换为 onBeforeUpdate和onupdate。beforeDestroy和destroyed被替换为beforeUnmount和unmounted。这些钩子函数的执行顺序与Vue2的版本相同。

onBeforeMount 钩子函数会在组件挂载到 DOM 前运行，可以用来在组件挂载前执行一些初始化操作。

onMounted 钩子函数会在组件挂载到 DOM 后运行，通常用于获取数据和初始化页面状态等操作。

onBeforeUpdate 钩子函数会在数据重新渲染之前运行，可以用来在组件更新前执行一些操作。

onUpdated 钩子函数会在数据重新渲染后运行，通常用于更新 DOM、执行动画或获取最新的状态等操作。

onBeforeUnmount 钩子函数会在组件卸载之前运行，可以用来清除定时器、取消事件监听器等操作。

onUnmounted 钩子函数会在组件卸载后运行，通常用于清理一些资源或取消订阅。