M5-11详细设计：Nuxt生命周期与副作用时机边界

这份设计文档说明 M5-11 为什么选择 Nuxt 生命周期与副作用场景，以及它将如何接入现有方法库。

设计目标

把 Nuxt 生命周期问题从“钩子顺序怎么记”还原成“启动、请求、导航、渲染和客户端交互如何分段，以及副作用应该落在哪一层”的边界设计问题，并用一篇案例把 Nuxt 项目里更稳的执行时机组织方式说清楚。

为什么在 M5-11 选 Nuxt生命周期与副作用时机

在当前方法库里，已经补齐了：

• 页面型案例
• 基础组件型案例
• SSR / hydration 运行时边界
• Nuxt 页面数据获取与渲染边界
• 状态管理型案例
• 复杂交互型案例
• 认证与权限型案例
• 路由与布局型案例
• 容错与降级型案例
• 异步加载型案例
• Nuxt 运行时边界型案例
• Nuxt 响应策略型案例

下一步最自然补的，就是 Nuxt 生命周期与副作用时机这条横向主线。因为它会同时影响：

• 服务启动期和单次请求期如何划分
• 路由验证、中间件和页面渲染如何衔接
• SSR 数据准备与客户端副作用如何分开
• 浏览器 API、订阅和清理逻辑如何避免混入服务端链路

所以 Nuxt 生命周期与副作用时机是一个非常适合作为 M5-11 的横向扩展线。

本轮案例的复杂度中心

本轮复杂度中心主要有四个：

• 启动级、请求级、导航级、渲染级、客户端交互级的分段模型
• 数据准备逻辑与副作用触发逻辑的拆分
• validate / 路由中间件 / 页面渲染之间的责任边界
• 只能在浏览器执行的副作用与清理点设计

与现有框架的映射关系

本轮将重点强化统一框架中的这些步骤：

• 第二步：找到真正的复杂度中心
• 第三步：先拆数据，再拆视图
• 第四步：判断状态应该放在页面、组件还是 composable
• 第八步：把副作用从组件和页面里收出去
• 第九步：让页面消费层尽量薄

本轮交付物

本轮预期交付物包括：

• 新案例：../Nuxt生命周期与副作用时机重构.md
• 新任务拆解：35-M5-11任务拆解-Nuxt生命周期与副作用场景.md
• 新详细设计：36-M5-11详细设计-Nuxt生命周期与副作用时机边界.md
• 新开发记录：37-开发记录-Nuxt生命周期与副作用时机重构.md

设计约束

本轮继续遵循当前项目约束：

• 不直接修改独立 demo 源码
• 只提炼核心逻辑与方法进入文档
• 每轮新增案例都要同步更新入口、导航和总框架

完成后的预期效果

完成后，当前方法库将会同时覆盖：

• 页面型重构
• 基础组件型重构
• 运行时边界型重构
• 框架场景型重构
• 状态管理型重构
• 复杂交互型重构
• 认证与权限型重构
• 路由与布局型重构
• 容错与降级型重构
• 异步加载型重构
• Nuxt 运行时边界型重构
• Nuxt 响应策略型重构
• Nuxt 执行时机型重构

这会让整套方法库从“案例集合”，继续长成一张更完整的 Vue / Nuxt 架构重构地图。