大家好，我是老码，今天咱们聊聊 Vue 3 里的 JSX/TSX，以及它怎么变成 VNode 的魔法。 各位观众老爷，晚上好！我是老码，一个在代码堆里摸爬滚打多年的老兵。今天咱们不聊虚的，直接来点硬货：Vue 3 里的 JSX/TSX，以及它背后的编译原理。 说起 Vue，大家肯定对它的模板语法不陌生。但有时候，模板写起来就感觉有点束手束脚，尤其是遇到复杂的逻辑。这时候，JSX/TSX 就闪亮登场了！它允许我们用更接近 JavaScript 的语法来描述 UI，写起来更灵活，也更符合程序员的口味。 那么问题来了：浏览器只能理解 HTML、CSS 和 JavaScript，JSX/TSX 又是怎么变成浏览器能识别的东西的呢？答案就是：编译器！它负责把 JSX/TSX 翻译成 Vue 能够理解的 VNode (Virtual DOM Node)。 1. JSX/TSX 是个啥？ 先来简单介绍一下 JSX/TSX。JSX 是一种 JavaScript 的语法扩展，允许你在 JavaScript 代码里书写类似 HTML 的标签。而 TSX，顾名思义，就是 TypeScript 版本的 JSX …