嵌套组件初始化耗时高源于父子生命周期串行执行与逻辑错配导致主线程阻塞；应理清钩子顺序、下沉重逻辑、异步加载+条件挂载、分层监控耗时。

嵌套组件初始化耗时高，本质是父子组件生命周期执行顺序叠加 + 逻辑错配导致的主线程阻塞。关键不是“减少钩子数量”，而是让每层组件在最合适的时机做最合适的事。

理清父子组件钩子执行顺序

Vue 和 React 中，嵌套组件的初始化并非并行，而是有明确先后：

• 父组件 beforeCreate / setup → created → beforeMount 先执行完毕；
• 子组件才开始走自己的 beforeCreate → created → beforeMount → mounted；
• 所有子组件 mounted 完毕后，父组件才触发 mounted。

这意味着：如果父组件 created 里就发起一个接口，等返回后再渲染子组件（比如用 v-if 控制），整个链路就被串行拖慢。应避免“父等子、子等数据、数据等网络”的深度依赖。

把重逻辑下沉到真正需要它的组件层级

不要在父组件中提前预加载子组件用不到的数据。例如一个仪表盘页包含「订单列表」「销售图表」「用户统计」三个子组件：

• 父组件 created 只做路由参数解析、权限校验等轻量同步操作；
• 「订单列表」在自身 created 或 onMounted 中拉取订单数据；
• 「销售图表」在 onMounted 后用 requestIdleCallback 延迟初始化 ECharts 实例；
• 「用户统计」若数据量小且复用率高，可考虑用 provide/inject 由父组件提供缓存结果，而非每个子组件重复请求。

用异步加载 + 条件挂载控制子组件节奏

对非首屏必需、或初始化代价高的子组件，主动降权：

• 用 defineAsyncComponent（Vue 3）或 React.lazy + Suspense（React）延迟加载组件代码；
• 配合 v-if / if 在数据就绪或用户交互（如点击 Tab）后再挂载，避免白屏期空转；
• 对已挂载但暂时不可见的子组件（如 Tabs 非激活页），用 keep-alive + onDeactivated 缓存状态，跳过重复 created 流程。

监控并拆解各层耗时

在关键节点打点，定位瓶颈在哪一层：

• 父组件 beforeCreate 开头打 performance.mark('parent-bc')；
• 子组件 mounted 结尾打 performance.mark('child-m')；
• 用 performance.measure 计算 parent-bc → child-m 的总耗时，并对比子组件内部各段耗时（如 child-c → child-m）；
• 若发现某子组件 created → mounted 占比异常高，说明它内部做了不该做的事（比如同步处理万级数组），需单独优化。