本质

入门章节先画地图，这里开始拆表象。

这里围绕日常最常见的语法和文件形态，反复问同一个问题：

你平时写下的这些 Vue 代码，最后到底会被转换成什么？

为什么要读这一章

很多开发者对 Vue 很熟，但熟悉常常停在“知道怎么用”：

• 知道 v-model 会双向绑定
• 知道 slot 能做内容分发
• 知道 <style scoped> 能做样式隔离
• 知道 script setup 写起来很方便

继续追问“它具体怎么实现”，很多结论就会变得模糊。

这里把这些高频能力逐个还原到编译产物和运行时行为上。

本章的判断框架

读每一篇时都可以反复问同一个问题：

问题	你要定位的层
这个写法会不会原样进入浏览器？	编译期
它最后生成的是 props、事件、slot 还是分支结构？	渲染函数 / VNode
更新时由谁重新执行、谁负责 patch？	运行时
类型、样式、构建产物是否受影响？	工程层

只要能把一个语法糖放回这四层之一，它的“本质”通常就清楚了。

阅读顺序

第一组：先理解 SFC 和语法糖

1. script setup 的本质
2. defineXXX 的本质
3. .vue 文件的本质

第二组：再理解模板指令

1. v-bind 的本质
2. v-on 的本质
3. v-model 的本质
4. v-if 的本质
5. v-for 的本质

第三组：最后理解内容组织与渲染形式

1. slot 的本质
2. v-slot 的本质
3. style scoped 的本质
4. h 函数的本质
5. Vue JSX / TSX 的本质

阅读这一章时建议关注什么

• 这项能力属于编译期、运行期，还是两者都有参与？
• 开发时的语法糖，最后对应到哪种 JavaScript 结构？
• 是否有与 React、JSX、原生 DOM API 更容易对照的实现方式？
• 这项能力会不会影响性能、类型推导或工程组织方式？

怎么读

不适合从头到尾机械通读。更好的方式是：

1. 先挑你平时最常用、但最没把握解释的主题
2. 对照 play.vuejs.org 看编译结果
3. 再回到项目源码里找对应实现

如果你已经能把这些高频语法糖和最后产物联系起来，下一步就可以进入 进阶章节，把认知推进到实际构建产物和 SSR 工程场景。

下一步

这里不是让你背语法，而是让你把常见写法重新识别成：

• 编译期展开
• 运行时协议
• 模板到产物的映射关系

这个识别能力建立起来后，Vue 的很多“神秘感”会明显下降。

接着读

如果你已经能把语法糖和产物联系起来，接下来可以进入 进阶章节，开始看真实构建结果和 SSR 工程场景。