Vue 父子组件生命周期钩子执行顺序详解-CJavaPy

1、生命周期执行顺序概览

1）加载/渲染阶段

组件创建流程为：调用顺序是先父后子，渲染完成顺序是先子后父。

2）数据更新阶段

3）销毁阶段

生命周期钩子	说明
beforeCreate	实例初始化完成之前， data 、 methods 等尚不可用。
created	实例已创建完成，可访问响应式数据，尚未挂载 DOM。可用于数据请求。
beforeMount	模板已编译，虚拟 DOM 即将挂载，尚未渲染成真实 DOM。
mounted	模板渲染完成，真实 DOM 挂载，适合操作 DOM 或发起依赖 DOM 的请求。
beforeUpdate	响应式数据更新前触发，可访问旧数据状态。
updated	DOM 更新后触发，注意不要在此更改数据，以免陷入死循环。
beforeDestroy	实例销毁前，可进行清理操作，如注销定时器、解绑事件等。
destroyed	实例完全销毁，所有绑定与子组件均已清除。

1）beforeCreate + created → 被 setup() 替代

2）beforeDestroy → 更名为 onBeforeUnmount

3）destroyed → 更名为 onUnmounted

4）其余生命周期统一加前缀 on（如 onMounted, onUpdated）

类型	方法	描述
父传子	props	子组件通过 `props` 接收数据，单向传递，不能直接修改。
子传父	$emit	子组件通过事件向父组件传值，父组件用监听事件方式接收。
父访问子	ref	父组件通过 `this.$refs.id` 调用子组件方法/属性。
双向绑定	.sync	父组件监听子组件 `update:` 事件并自动更新传值。
兄弟组件	eventBus	通过发布/订阅事件通信。 `$emit` + `$on` 。
全局状态	Vuex	使用状态管理统一传值，适用于大型应用，不推荐小项目使用。