语法演示

这一页不负责系统讲原理，而是提供一组“可以快速验证”的小切口。

它的作用更像实验台：

• 某些写法 Vue 到底允不允许
• 某些能力到底属于模板层、SFC 层，还是运行时层
• 某些平时容易口口相传出错的结论，能不能马上用示例验证

这页适合什么时候看

适合在你出现下面这些情况时使用：

• 读正文时已经知道结论，但还想自己快速试一下
• 遇到“我记得可以 / 我记得不行”的经验型争议
• 想拿一个极小示例验证某个编译现象

一个 .vue 文件中定义多个组件

很多人会默认认为“一个 .vue 文件就只能定义一个组件”，但这个说法要拆开看。

更准确的理解是：

• 一个 .vue SFC 作为文件入口，通常只会有一个默认导出组件
• 但你仍然可以在同一个文件里定义其他局部组件或普通变量
• ESLint 的 one-component-per-file 更偏团队规范，不等于运行时绝对限制

所以真正要区分的是：

• “能不能在同一文件里声明多个组件对象”
• “这个 SFC 最终对外公开的组件入口是什么”

TSX 的本质

如果你想快速理解 TSX，更建议直接把它看成：

• 另一种 render 输入形式
• 最终仍然会被编译成 Vue 的 VNode 创建调用

建议继续看：

1. vue jsx/tsx 的本质
2. h 函数的本质
3. vue+jsx 全编译项目

怎么使用这一页

最好的方式不是只看文字，而是把这里的结论拿去：

1. 在 play.vuejs.org 验证
2. 在本仓库示例项目里跑一遍
3. 对照 DevTools 里的实际产物再确认一次

一句话理解

这一页是用来快速验证 Vue 语法和编译结论的小实验台，不是完整教程。