标签： jsx

各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊Vue 3里那个让人又爱又恨的JSX/TSX，以及它背后的功臣——@vue/babel-plugin-jsx。别害怕，虽然听起来高大上，但咱们会用最接地气的方式把它扒个精光。 开场白：JSX/TSX，你真的了解吗？ 首先，我们要明确一个概念：JSX/TSX 并不是 Vue 独有的，它最早来自 React。简单来说，它们是一种在 JavaScript/TypeScript 代码中编写 HTML 结构的语法糖。 JSX: JavaScript XML，顾名思义，就是用 XML 的形式来写 JavaScript。 TSX: TypeScript XML，则是 JSX 的 TypeScript 版本，增加了类型检查。 在 Vue 中使用 JSX/TSX，我们可以直接在组件的 render 函数里写 HTML 标签，而不用像以前那样使用模板字符串或者 h 函数。 为什么要用 JSX/TSX？ 这个问题就好比，为什么要用汽车而不是马车？各有优缺点，看你具体需求。 特性 JSX/TSX 模板 (Template) 灵活性 非常灵活，可以使用完整的 …

继续阅读“Vue 3源码极客之：`Vue`的`JSX/TSX`：`@vue/babel-plugin-jsx`的实现。”

各位靓仔靓女，欢迎来到今天的“Vue 3 源码极客之 JSX/TSX 编译：如何将 JSX 转换成 Vue 的 render function” 讲座！ 我是你们的老朋友，今天就带大家一起扒一扒 Vue 3 里面 JSX/TSX 编译的那些事儿，保证让你们听完之后，不仅能用 JSX/TSX 撸代码，还能知道它背后是怎么运作的，成为真正的 “懂王”！ 一、 啥是 JSX/TSX？为啥 Vue 要支持它？ 首先，咱们得搞清楚，JSX/TSX 是个啥玩意儿？ 简单来说，JSX 是一种 JavaScript 的语法扩展，它允许你在 JavaScript 代码里写 HTML 标签。 比如： const element = <h1>Hello, JSX!</h1>; TSX 呢，就是 JSX 加上了 TypeScript 的类型检查，让你的代码更健壮。 那为啥 Vue 要支持 JSX/TSX 呢？ 原因很简单，就是为了让开发者更爽！ 代码可读性更高： JSX 让你直接在 JS 代码里写 HTML 结构，一目了然，不用像 template 那样，还得跳来跳去。 组件化更方便： …

继续阅读“Vue 3源码极客之：`Vue`的`JSX/TSX`编译：如何将`JSX`转换成`Vue`的`render function`。”

大家好，我是老码，今天咱们聊聊 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 …

继续阅读“Vue 3源码深度解析之：`Vue`的`JSX/TSX`：如何将`JSX`编译成`VNode`。”