M5-2详细设计：Nuxt 数据流与渲染边界

这份设计文档说明 M5-2 为什么选择 Nuxt 数据获取与渲染模式作为扩展方向，以及它将如何接入现有方法库。

设计目标

把 Nuxt 页面中最常见、也最容易混乱的边界问题，整理成一篇可直接映射到重构流程里的案例文档。

为什么在 M5-2 选 Nuxt

在 M5-1 中，方法库已经补进了 SSR / hydration 这条线，但它更偏“跨运行时数据流协议”。

M5-2 选择 Nuxt，是为了继续补完更贴近页面重构的另一层：

• 页面到底该怎么拿数据
• 页面和 composable 如何分工
• 首屏数据与交互状态如何分层
• 哪类页面更适合 SSR / CSR / 混合策略

这会让方法库从“Vue 重构”进一步扩展到“Nuxt 页面重构”。

本轮案例的复杂度中心

本轮复杂度中心不是某个具体功能，而是页面数据准备的几个关键边界：

• 页面首屏数据边界
• 交互型本地状态边界
• SSR 与 hydration 执行边界
• 运行时模式选择边界

与现有框架的映射关系

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

• 第一步：先判断重构对象类型
• 第四步：判断状态应该放在页面、组件还是 composable
• 第六步：显式数据流优先，隐式通信后退
• 第七步：把副作用和派生状态分开
• 第九步：让页面消费层尽量薄

本轮交付物

本轮预期交付物包括：

• 新案例：../Nuxt数据获取与渲染模式重构.md
• 新任务拆解：07-M5-2任务拆解-Nuxt数据获取与渲染模式.md
• 新详细设计：08-M5-2详细设计-Nuxt数据流与渲染边界.md
• 新开发记录：09-开发记录-Nuxt数据获取与渲染模式重构.md

设计约束

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

• 不直接修改独立 demo 源码
• 只把可复用方法与逻辑沉淀到文档
• 新案例必须同步接入导航、总框架和过程文档

完成后的预期效果

完成后，当前方法库将同时具备：

• Vue 客户端页面案例
• Vue 基础组件案例
• SSR / hydration 案例
• Nuxt 页面数据获取与渲染模式案例

这会让 M5 的扩展方向从“增加案例数量”，升级为“扩大覆盖的运行时与框架范围”。