前端面试场景题：多层组件嵌套生命周期的执行顺序？

<LayoutComponent>  
   <ContainerComponent>  
       <ActualContent />  
   </ContainerComponent>  
</LayoutComponent> 

这样一个3层的组件嵌套，在 Vue 和 React 中，他们生命周期的执行顺序是什么？

面试回答：

对于这种多层嵌套的组件

1. Vue 的生命周期顺序

// 创建阶段（从外到内）：

LayoutComponent beforeCreate/created

  ContainerComponent beforeCreate/created

    ActualContent beforeCreate/created

// 挂载阶段（从内到外）：

    ActualContent beforeMount/mounted

  ContainerComponent beforeMount/mounted

LayoutComponent beforeMount/mounted

执行原理：

• 创建为什么从外到内：

• 父组件需要先初始化，才能为子组件提供数据（props）和上下文

• Vue 的数据流是自上而下的，父组件状态会影响子组件的渲染

• 挂载为什么从内到外：

• 子组件必须先挂载完成，父组件才能获得完整的 DOM 结构

• 确保在父组件的 mounted 钩子中可以安全地操作子组件的 DOM

2. React 的生命周期顺序

// 渲染阶段（从外到内）：

LayoutComponent 函数执行

  ContainerComponent 函数执行

    ActualContent 函数执行

// useEffect 执行（从内到外）：

    ActualContent useEffect

  ContainerComponent useEffect

LayoutComponent useEffect

执行原理：

• 渲染为什么从外到内：

• React 的单向数据流，父组件的状态决定子组件的渲染

• 需要先确定父组件的渲染内容，才能正确渲染子组件

• Effect 为什么从内到外：

• 确保子组件的副作用先执行完成，父组件才能安全地进行 DOM 操作

• 符合组件卸载时的清理顺序，子组件应该先清理

现在前端面试很喜欢问场景题，考察你实际的开发能力和解决问题的能力，你要是开发经验不足，根本不知道怎么回答，面试就凉了，云哥这里整理了1百多个前端面试场景题，就两杯咖啡的价，需要的看我主页置顶的文章 小店里就有