vue-component-lifecycle

Vue Component Lifecycle Relationships (2025-02-27 17:07:28)

Question：vue 中子组件生命周期和父组件生命周期的

---

Answer：

Vue 中子组件生命周期和父组件生命周期的关系

在 Vue 中，父组件和子组件的生命周期钩子函数执行顺序遵循一定的规则。以下是它们之间的关系：

组件创建和挂载阶段

1. 父组件 beforeCreate
2. 父组件 created
3. 父组件 beforeMount
4. 子组件 beforeCreate
5. 子组件 created
6. 子组件 beforeMount
7. 子组件 mounted
8. 父组件 mounted

组件更新阶段

1. 父组件 beforeUpdate
2. 子组件 beforeUpdate
3. 子组件 updated
4. 父组件 updated

组件销毁阶段

1. 父组件 beforeDestroy
2. 子组件 beforeDestroy
3. 子组件 destroyed
4. 父组件 destroyed

关键点

• 创建过程是由外到内（父组件先创建，然后是子组件）
• 挂载过程是由内到外（子组件先挂载完成，然后是父组件）
• 更新过程也是由外到内再由内到外
• 销毁过程也是由外到内再由内到外

在你的代码中，banner、mysz、jjzd、hot 和 bottomNav 这些子组件的生命周期会在父组件 2025sszz-m 的相应生命周期内按照上述规则执行。例如，当你的页面加载时，父组件的 created 钩子会先执行（其中调用了 initData 方法），然后才会执行子组件的 created 钩子。而在挂载阶段，所有子组件的 mounted 钩子会先执行完毕，然后才会执行父组件的 mounted 钩子。

---

Question：父组件中在 created 中使用 async await，会阻塞子组件的加载吗

---

Answer：

父组件中在 created 使用 async await 是否会阻塞子组件加载

父组件在 created 生命周期钩子中使用 async/await 不会阻塞子组件的创建和挂载过程。

原因解释

1. JavaScript 的事件循环机制：
   • 当父组件执行到 async/await 时，异步操作会被放入微任务队列
   • Vue 的组件创建过程会继续执行，不会等待这些异步操作完成
2. Vue 组件渲染流程：
   • 父组件的 created 钩子执行后，Vue 会继续处理组件树的渲染
   • 子组件的创建和挂载过程会正常进行，不受父组件中异步操作的影响

实际情况

• 父组件中的 created 钩子执行（包含 async/await 代码）
• 父组件继续执行到 beforeMount
• 子组件开始其生命周期（beforeCreate、created、beforeMount、mounted）
• 父组件完成 mounted
• 父组件中的异步操作在完成后会执行其后续代码

需要注意的点

虽然不会阻塞子组件的加载，但如果子组件依赖于父组件异步获取的数据，可能会出现以下情况：

1. 子组件首次渲染时拿不到数据（因为异步操作尚未完成）
2. 数据获取完成后，会触发组件的更新周期

最佳实践

如果子组件依赖父组件异步获取的数据：

1. 使用 v-if 控制子组件的渲染时机
2. 在父组件模板中添加加载状态指示
3. 考虑使用 Vuex 或 Pinia 等状态管理工具
4. 使用 watch 或计算属性处理数据依赖关系

---

---