进阶

这里把视角从语法切到工程产物：同一份 Vue 代码，在不同运行和构建模式下会变成什么。

理解模板、SFC、指令和渲染函数之后，接下来会遇到这些问题：

• 纯运行时项目和带编译器项目有什么区别？
• vite dev 和 vite build 下的产物为什么差异这么大？
• SSR / Hydration 到底是怎样接入到这套体系里的？

这里直接看真实工程结果。

谁适合读

• 想把“Vue 原理”连接到实际构建结果的人
• 正在排查编译产物、样式注入、Hydration 问题的人
• 想理解不同运行模式和构建模式差异的人

本章内容

• 纯运行时项目 理解一个 Vue 项目在没有模板编译参与时是什么样子。
• Vue + JSX 全编译项目 从另一种输入形式观察编译和构建的边界。
• Vite dev / build 下的 Vue 产物 直接对照开发态与生产态产物差异，理解 HMR、样式注入、代码组织方式的变化。
• Vue 3.5 SSR 与 Hydration 进入服务端渲染场景，理解新的 Hydration 策略和常见问题控制手段。

怎么读

如果你偏工程实践

优先看 Vite dev / build 下的 Vue 产物，再看 SSR 一文。

如果你偏原理验证

先从 纯运行时项目 和 Vue + JSX 全编译项目 开始，对照不同输入形式。

按场景切入

• 想看“没有 SFC 模板时 Vue 还剩什么”： 从 纯运行时项目 开始
• 想看 JSX / h() 和模板写法之间的关系： 先看 Vue + JSX 全编译项目，再回看 h 函数的本质
• 想排查开发态和生产态产物差异： 直接看 Vite dev / build 下的 Vue 产物
• 想理解 Vue 3.5 在 SSR 方向到底改进了什么： 直接看 Vue 3.5 SSR 与 Hydration

读完这一章后，你应该能回答

• 为什么开发态会出现大量带查询参数的模块请求
• 为什么生产构建后的代码组织方式完全不同
• 样式在开发态和生产态分别怎样注入与产出
• 哪些 SSR 问题是渲染问题，哪些是 Hydration 时机问题

如果你希望继续往 Vue 更内部的实现机制走，可以进入 深入章节。

如果你发现自己在读这一章时经常搞混“编译本质”和“日常语法”，建议回到 本质章节 补一轮高频语法糖。

下一步

这里把“编译原理”接到“工程产物”上：

• 开发态为什么长这样
• 生产态为什么又完全不同
• 运行时、构建器、SSR 各自扮演什么角色

这一层打通后，很多构建现象就不再只是“看起来很复杂”的黑盒。

接着读

接下来可以进入 深入章节，把视角继续推进到响应式系统、类型提取和编译扩展。