生命周期和父子组件执行顺序怎么讲?

先理解原理和示例,再练习完整口述与追问。

说明创建、挂载、更新、销毁阶段分别适合做什么。普通同步首次挂载中,父组件先创建、子组件先 mounted;异步组件、条件分支、SSR 等需要另行考虑。SSR 不运行 mounted 和销毁阶段等客户端钩子。

创建阶段初始化状态、事件和实例关系;挂载阶段执行渲染并建立 DOM;更新阶段把变化映射到已有页面;销毁阶段解绑实例拥有的资源。普通同步首次挂载时父先创建、子先完成挂载,父 mounted 在同步子树挂载后执行;更新钩子也受父子关系与批量调度影响。需要明确这是同步组件的常见流程,异步组件、Suspense 或条件渲染不能不加条件套用。

同步首次挂载的常见顺序:父 beforeCreate → 父 created → 父 beforeMount → 子 beforeCreate → 子 created → 子 beforeMount → 子 mounted → 父 mounted。created 可准备状态或发不依赖 DOM 的请求;mounted 可初始化浏览器第三方库;beforeDestroy 清理 window 监听、计时器和图表实例。

SSR 中没有浏览器挂载与客户端销毁生命周期,不要在服务端创建阶段启动指望 beforeDestroy 清理的长期任务。mounted 也不保证所有图片、请求和异步子组件都完成。

Vue2 在 beforeCreate 时尚未完成常规状态初始化,created 已可访问 data、methods 等;beforeMount 在首次渲染挂载前,mounted 后可访问已挂载 DOM。更新阶段有 beforeUpdate、updated,销毁前后有 beforeDestroy、destroyed。普通同步父子首次挂载是父 beforeCreate、父 created、父 beforeMount,再创建并挂载子,最后父 mounted。异步子组件需要单独等待;SSR 通常只执行 beforeCreate、created 等创建阶段,不能依赖 mounted。

面试官可能继续问追问与完整解答展开收起

created 能拿 DOM 吗?父 mounted 能保证所有异步子组件完成吗?监听器和定时器在哪清理?

created 不保证存在已挂载 DOM。父 mounted 也不保证异步组件、图片和请求全部完成。客户端监听、定时器、第三方实例应在 beforeDestroy 等合适时机清理;SSR 不会依赖客户端销毁钩子,因此不要在服务端 created 中启动永不释放的定时器。