1. 从“模板”到“代码”为什么要在Vue 3里考虑JSX如果你是从React生态转过来的开发者看到这个问题可能会觉得有点奇怪——JSX不是React的标配吗怎么在Vue里还需要“巧妙运用”而对于长期深耕Vue生态、习惯了.vue单文件组件SFC和模板语法的朋友来说JSX可能更像一个“熟悉的陌生人”知道Vue支持但总觉得那是给“另一拨人”用的或者只在渲染函数这种高级场景里偶尔露个脸。我得说这种想法在Vue 2时代或许成立但在Vue 3的今天是时候重新审视JSX了。Vue 3在底层设计上拥抱了更灵活的渲染机制其响应式系统和组合式APIComposition API的核心理念与JSX这种声明式、基于JavaScript的UI描述方式其实有着惊人的契合度。我并不是说SFC模板不好——它在绝大多数场景下依然是清晰、高效且Vue味十足的最佳选择。但当你遇到一些特定场景时比如需要极致动态的渲染逻辑、复杂的条件分支嵌套、或者需要与TypeScript进行深度类型集成时JSX能提供一种更“原生”的JavaScript编程体验。简单来说你可以把Vue的模板看作一门为UI定制的、声明式的领域特定语言DSL它优雅、简洁但有其固定的语法边界。而JSX则是JavaScript语法在UI描述上的一次扩展它让你能在熟悉的JavaScript环境里用if/else、map、reduce这些最基础的编程原语来构建视图。这种“什么都能写”的自由度既是它的魅力也是需要“巧妙运用”的原因——用不好就容易写出难以维护的“面条代码”。所以这篇文章不是一篇“非此即彼”的站队文而是一份“工具使用指南”。我会结合具体的场景聊聊在Vue 3项目中哪些情况下JSX能成为你的秘密武器以及如何规避它的常见陷阱让它真正为你的开发效率和代码质量加分。2. 环境搭建与基础心智模型转换在开始写第一行JSX之前我们得先把场子搭起来。这不仅仅是安装一个插件那么简单更涉及到从“模板思维”到“JSX思维”的转换。2.1 项目配置让Vite认识JSX现在Vue 3的新项目十有八九是用Vite作为构建工具的。要让Vite支持Vue 3中的JSX更准确地说在Vue语境下常被称为TSX当与TypeScript结合时你需要安装官方的插件。npm install vitejs/plugin-vue-jsx -D # 或 yarn add vitejs/plugin-vue-jsx -D # 或 pnpm add vitejs/plugin-vue-jsx -D然后在你的vite.config.ts中引入并配置它// vite.config.ts import { defineConfig } from vite import vue from vitejs/plugin-vue import vueJsx from vitejs/plugin-vue-jsx export default defineConfig({ plugins: [ vue(), vueJsx(), // 放在vue插件之后 ], })这个vitejs/plugin-vue-jsx插件非常关键它做了两件核心事一是接管了.jsx和.tsx文件的编译将它们转换为Vue能理解的渲染函数二是注入了Vue JSX转换所需的运行时帮助函数。没有它你的JSX语法在Vue项目里就是一堆无法识别的标记。注意如果你在配置后运行项目遇到了类似error [err_module_not_found]: cannot find package vite imported from的错误这通常不是JSX插件的问题而是你的项目根目录下可能缺少了node_modules或者vite本身没有正确安装。请先确保执行了npm install安装了所有依赖。配置好后你就可以创建.jsx或.tsx后缀的文件了。我个人更推荐直接使用.tsx即使你一开始不打算写复杂的类型TypeScript也能为JSX提供更好的语法提示和错误检查。2.2 核心语法差异告别v-指令拥抱JavaScript这是思维转换的第一步也是最重要的一步。在SFC模板中我们通过v-if、v-for、v-on这些指令来告诉Vue“做什么”。而在JSX中这些概念全部回归到最基础的JavaScript。1. 条件渲染v-ifvs和三元表达式在模板里你写div v-ifisVisible我会出现/div div v-else否则我出现/div在JSX里你直接写JavaScriptconst MyComponent () { return ( div {isVisible ? div我会出现/div : div否则我出现/div} {/* 或者更简单的逻辑 */} {isVisible div只有为真时我才渲染/div} /div ) }你会发现逻辑变得更“内聚”了。条件判断就写在它控制的元素旁边不需要在模板里跳来跳去找对应的v-else。2. 列表渲染v-forvsArray.map()模板写法ul li v-foritem in list :keyitem.id{{ item.name }}/li /ulJSX写法const MyComponent ({ list }) { return ( ul {list.map(item ( li key{item.id}{item.name}/li ))} /ul ) }map是任何JavaScript开发者都熟悉的数组方法用它来渲染列表非常自然。千万记得写key这是Vue用来追踪节点身份的核心机制在JSX里它就是一个普通的prop但在列表渲染中不可或缺否则可能导致诡异的渲染错误或性能问题。3. 事件处理v-onvsonXxx模板写法button clickhandleClick点击/buttonJSX写法const MyComponent () { const handleClick (event) { console.log(Clicked!, event) } return button onClick{handleClick}点击/button }事件监听器的属性名遵循驼峰命名法onClick、onInput其值直接传入一个函数引用。这里有一个重要的细节在Vue模板中clickhandleClick会自动处理为handleClick($event)。而在JSX中你传入的就是函数本身事件对象会作为第一个参数自动传入。如果你需要传递额外参数需要用一个箭头函数包裹button onClick{(e) handleClick(id, e)}点击/button4. 动态属性与v-bind模板中绑定多个属性你可能用v-bindobject。在JSX中你可以直接使用ES6的扩展运算符这简直是为JSX量身定做的const attrs { id: my-id, class: container, data-test: button } return div {...attrs}内容/div绑定单个属性则更简单用花括号{}包裹JavaScript表达式即可return div className{isActive ? active : } style{{ color: textColor }}内容/div注意class在JSX中要写成className与DOM API一致style接受一个对象而不是模板中的字符串。2.3 定义组件函数式与响应式在JSX文件中你定义组件的方式主要有两种对应Vue 3的两种组件风格。1. 函数式组件推荐在简单场景使用这更像React的函数组件直接返回一个JSX元素。它没有内部状态不使用ref,reactive主要依靠props。// Hello.tsx import { defineComponent } from vue // 使用 defineComponent 可以获得更好的类型提示 export default defineComponent({ name: Hello, props: { msg: String }, setup(props) { // setup 函数可以在这里处理逻辑 return () ( // 注意必须返回一个渲染函数 div h1{props.msg}/h1 /div ) } })或者使用更简洁的语法糖需要Vue 3.3// 使用 script setup 风格的语法糖在 .tsx 中 import { withDefaults, defineProps } from vue interface Props { msg: string count?: number } // 定义props const props withDefaults(definePropsProps(), { count: 0 }) // 直接编写渲染逻辑 const render () ( div h1{props.msg}/h1 pCount: {props.count}/p /div ) export default render // 导出渲染函数2. 使用组合式API的响应式组件这是更强大和常用的方式你可以在setup函数中使用ref,reactive,computed,watch等所有Vue响应式API。import { defineComponent, ref, computed } from vue export default defineComponent({ name: Counter, setup() { const count ref(0) const double computed(() count.value * 2) const increment () { count.value } // 返回渲染函数可以访问所有响应式状态和方法 return () ( div pCount: {count.value}/p pDouble: {double.value}/p button onClick{increment}1/button /div ) } })这里的关键点是setup函数返回的是一个渲染函数而不是直接返回JSX元素。这个渲染函数会在响应式数据变化时被自动调用。在函数内部你可以像写普通JavaScript一样使用count.value来访问ref的值。3. JSX的“杀手级”应用场景了解了基础语法后我们来看看JSX在哪些场景下能真正发挥出它的优势让你觉得“这用模板写起来真别扭还是JSX香”。3.1 场景一高度动态的渲染逻辑这是JSX最核心的优势所在。当你的组件渲染结构需要根据复杂的数据结构或运行时状态动态生成时JSX的威力就显现出来了。假设你要渲染一个基于JSON配置的动态表单配置可能长这样[ { type: input, label: 姓名, field: name }, { type: select, label: 城市, field: city, options: [北京, 上海] }, { type: checkbox, label: 同意协议, field: agreement } ]在SFC模板中你可能会写一堆v-if、v-else-if来判断type或者用一个动态组件component :is...。但用JSX你可以写成一个非常清晰的渲染函数import { defineComponent } from vue interface FieldConfig { type: input | select | checkbox label: string field: string options?: string[] } export default defineComponent({ props: { config: { type: Array as PropTypeFieldConfig[], required: true }, modelValue: { type: Object, required: true } }, emits: [update:modelValue], setup(props, { emit }) { const updateValue (field: string, value: any) { emit(update:modelValue, { ...props.modelValue, [field]: value }) } return () ( form {props.config.map((item) { // 根据类型动态渲染不同的表单控件 switch (item.type) { case input: return ( div classform-item key{item.field} label{item.label}/label input typetext value{props.modelValue[item.field] || } onInput{(e) updateValue(item.field, (e.target as HTMLInputElement).value)} / /div ) case select: return ( div classform-item key{item.field} label{item.label}/label select value{props.modelValue[item.field] || } onChange{(e) updateValue(item.field, (e.target as HTMLSelectElement).value)} option value请选择/option {item.options?.map(opt ( option value{opt} key{opt}{opt}/option ))} /select /div ) case checkbox: return ( div classform-item key{item.field} label input typecheckbox checked{!!props.modelValue[item.field]} onChange{(e) updateValue(item.field, (e.target as HTMLInputElement).checked)} / {item.label} /label /div ) default: return null } })} /form ) } })这段代码的清晰度在于渲染逻辑和业务逻辑是内聚在一起的。switch语句的每个case直接返回对应的JSX元素你可以很容易地看到每种配置类型对应什么样的UI。如果要新增一种type比如textarea你只需要添加一个case分支即可。在模板中实现同样的功能要么需要定义多个子组件并用v-if切换要么使用动态组件但逻辑的连贯性会差一些。3.2 场景二作用域插槽Scoped Slots的灵活运用作用域插槽是Vue一个非常强大的特性它允许子组件向父组件的插槽内容传递数据。在模板中它的语法是v-slot或#default。在JSX中作用域插槽的写法更加“函数式”理解起来也更直观。子组件 (Child.jsx)import { defineComponent } from vue export default defineComponent({ setup(props, { slots }) { const userData { name: 张三, age: 25, city: 北京 } // 返回渲染函数 return () { // 检查是否有默认插槽并以函数形式调用它传入数据 return ( div classchild h3子组件区域/h3 {slots.default ? slots.default(userData) : p默认内容/p} {/* 如果有命名插槽也可以同样处理 */} {slots.footer slots.footer({ timestamp: new Date().toISOString() })} /div ) } } })父组件中使用 (Parent.jsx)import { defineComponent } from vue import Child from ./Child.jsx export default defineComponent({ setup() { return () ( div h2父组件/h2 Child {/** 这里是一个函数接收子组件传递过来的数据 */} {(slotProps: { name: string; age: number; city: string }) ( div p来自子组件的数据/p ul li姓名{slotProps.name}/li li年龄{slotProps.age}/li li城市{slotProps.city}/li /ul /div )} {/** 命名插槽的写法通过 v-slots 属性传递一个对象 */} {{ footer: (props: { timestamp: string }) ( div style{{ marginTop: 20px, fontSize: 0.8em }} 页脚 - 生成于{new Date(props.timestamp).toLocaleString()} /div ) }} /Child /div ) } })在JSX中作用域插槽就是一个返回JSX的函数。子组件通过slots.default(...)调用这个函数并传入数据父组件则在子组件标签内部直接以函数的形式定义这个插槽内容。这种写法让数据流变得异常清晰你一眼就能看出哪些数据是从子组件传上来的父组件又是如何消费这些数据的。对于需要复杂数据交互的可复用组件如表单封装、数据列表项渲染等这种模式非常高效。3.3 场景三与TypeScript的深度集成如果你使用TypeScript那么JSXTSX带来的类型安全体验是模板难以比拟的。Vue 3本身对TypeScript支持极佳结合TSX你几乎可以在编写视图时获得全链路的类型提示和检查。1. 组件Props的类型安全import { defineComponent, PropType } from vue interface User { id: number name: string email: string avatar?: string // 可选属性 } export default defineComponent({ name: UserCard, props: { // 使用 PropType 进行运行时类型声明同时为TS提供类型 user: { type: Object as PropTypeUser, required: true }, showEmail: { type: Boolean, default: false }, onSelect: { type: Function as PropType(user: User) void, default: undefined } }, setup(props) { // 在这里props.user 的类型是 User // props.onSelect 的类型是 ((user: User) void) | undefined const handleClick () { if (props.onSelect) { props.onSelect(props.user) // 类型安全知道传入的是User对象 } } return () ( div classuser-card onClick{handleClick} {props.user.avatar img src{props.user.avatar} alt{props.user.name} /} h4{props.user.name}/h4 {props.showEmail p{props.user.email}/p} /div ) } })当你在其他组件中使用UserCard时如果你的IDE支持TypeScript如VSCode你会得到完美的自动补全和类型错误提示。如果你传了一个不符合User接口的对象或者漏掉了required的属性在编写代码时就能立刻发现而不是等到运行时。2. 渲染函数的返回类型在setup返回的渲染函数中TypeScript可以推断出你返回的JSX元素类型。虽然这通常不是问题但在一些高级场景比如编写高阶组件HOC时明确的返回类型很有帮助。3. 事件处理函数的参数类型在模板中事件处理函数的参数类型往往需要你手动声明。而在TSX中事件对象如MouseEvent,KeyboardEvent和自定义事件参数的类型可以清晰地定义和推断。const handleInput (e: Event) { const target e.target as HTMLInputElement console.log(target.value) // TypeScript知道target有value属性 } return input onInput{handleInput} /3.4 场景四构建高阶组件HOC与渲染劫持高阶组件在React中是一种常见的复用逻辑的模式。在Vue中虽然组合式API和Composables是首选的逻辑复用方式但有时你仍然需要创建一个组件它包装另一个组件并增强其功能。JSX在这种模式下写起来非常顺手。假设我们要创建一个withLoading高阶组件它在数据加载时显示一个加载指示器// withLoading.tsx import { defineComponent, h, ComponentPublicInstance } from vue // 这是一个函数接收一个组件作为参数返回一个新的增强组件 export function withLoading(WrappedComponent: any) { return defineComponent({ name: WithLoading${WrappedComponent.name || }, props: { loading: { type: Boolean, default: false }, // 其他原组件的props会通过 ...this.$props 传递下去 }, setup(props, { slots, attrs }) { return () { if (props.loading) { return div classloading-indicator加载中.../div } // 渲染被包装的组件并传递所有的props、attrs和slots return h(WrappedComponent, { ...props, ...attrs }, slots) } } }) } // 使用示例一个普通的展示组件 const UserProfile defineComponent({ props: [user], setup(props) { return () div用户名{props.user?.name}/div } }) // 增强后的组件 const UserProfileWithLoading withLoading(UserProfile) // 在另一个组件中使用 export default defineComponent({ setup() { const user ref(null) const loading ref(true) onMounted(async () { const data await fetchUser() user.value data loading.value false }) return () ( div UserProfileWithLoading loading{loading.value} user{user.value} / /div ) } })在这个例子中withLoading函数接受一个组件返回一个新的组件。新组件根据loadingprop决定是渲染加载状态还是渲染原组件。使用h函数createElement的别名来动态创建被包装组件的VNode。这种模式在JSX中非常自然因为组件本身就是函数或对象可以像普通值一样被传递和组合。4. 避坑指南与性能优化JSX给了你强大的灵活性但“能力越大责任越大”。如果不加注意很容易掉进一些坑里或者写出性能不佳的代码。4.1 常见陷阱与解决方案陷阱一忘记setup返回渲染函数这是新手最容易犯的错误。在JSX组件中setup函数必须返回一个函数即渲染函数而不是直接返回JSX或VNode。// 错误 setup() { const count ref(0) return div{count.value}/div // 直接返回了JSX不会响应式更新 } // 正确 setup() { const count ref(0) return () div{count.value}/div // 返回一个函数 }原因在于Vue的响应式系统需要追踪依赖。当setup返回一个函数时Vue会在响应式数据变化时重新执行这个函数生成新的VNode。如果直接返回静态的VNode数据变化了视图也不会更新。陷阱二在渲染函数中产生副作用渲染函数应该是纯函数它只根据props和state计算并返回VNode。绝对不要在渲染函数内部执行如修改数据、发起网络请求、操作DOM等副作用。// 错误在渲染函数中修改响应式数据 return () { count.value // 这会导致无限重新渲染 return div{count.value}/div } // 错误在渲染函数中发起请求 return () { fetchData() // 每次渲染都会发起请求可能导致请求风暴 return div.../div }副作用应该放在setup函数的主体部分、生命周期钩子onMounted,onUpdated等或watch/watchEffect中。陷阱三不稳定的key在列表渲染时key必须是稳定、唯一且可预测的。使用数组索引index作为key在列表项顺序会改变时如排序、过滤、插入是灾难性的会导致Vue错误地复用DOM节点引发状态错乱。// 不佳使用索引作为key {items.map((item, index) ( ListItem key{index} item{item} / ))} // 推荐使用数据中唯一且稳定的ID {items.map(item ( ListItem key{item.id} item{item} / ))}陷阱四事件处理函数导致不必要的重新渲染在JSX中如果你在渲染函数内部定义事件处理函数每次重新渲染都会创建一个新的函数实例。对于子组件来说这可能导致其不必要的重新渲染因为props变了。const MyComponent () { const handleClick () { /* ... */ } // 每次渲染都创建新函数 return Child onClick{handleClick} / }优化方案是使用useMemoVue中对应computed或useMemofromvueuse/core缓存函数或者将函数定义移到setup作用域外层如果它不依赖响应式状态。import { ref, defineComponent } from vue export default defineComponent({ setup() { const count ref(0) // 将函数定义在setup作用域内但依赖项变化时它不会变除非你希望它变 const handleClick () { count.value } return () ( button onClick{handleClick}点击了 {count.value} 次/button ) } })在这个例子中handleClick在组件实例的生命周期内是稳定的因为它被定义在setup函数内部但闭包引用了count。每次渲染时返回的渲染函数中onClick指向的都是同一个handleClick函数引用。4.2 性能优化要点1. 合理使用memo/shouldComponentUpdate在Vue 3中你可以使用defineComponent的setup函数配合响应式系统的精细控制来避免不必要的子组件渲染。但对于函数式组件或简单组件有时你希望明确告诉Vue“只有当某些props变化时才重新渲染我”。你可以手动实现或者使用第三方工具。Vue 3本身没有直接的React.memo等价物因为其响应式系统通常能自动优化。但你可以通过computed或watch来精确控制。一个常见的模式是将可能频繁变化但子组件不关心的数据“提升”到父组件或者使用v-memo指令在模板中。在JSX中你需要更自觉地组织数据和组件结构。2. 避免在JSX中内联复杂的对象或函数和内联事件处理函数类似内联对象字面量也会导致每次渲染都创建新引用。// 不佳每次渲染都创建新的style对象 return div style{{ color: red, fontSize: 14px }}内容/div // 优化将静态对象提取到组件外部或使用ref/computed const staticStyle { color: red, fontSize: 14px } // 或在setup中 const style computed(() ({ color: isActive.value ? red : black, fontSize: 14px }))对于静态样式提取为常量。对于动态样式使用computed创建响应式引用。3. 大型列表的虚拟滚动如果你需要渲染成百上千的列表项直接使用map渲染所有DOM节点会严重影响性能。此时应该考虑虚拟滚动方案。在Vue生态中你可以使用像vue-virtual-scroller这样的库。在JSX中集成虚拟滚动库通常也很直接因为虚拟滚动组件本身就是一个接收渲染函数作为插槽的组件。import { RecycleScroller } from vue-virtual-scroller import vue-virtual-scroller/dist/vue-virtual-scroller.css export default defineComponent({ setup() { const items ref(/* 大型数组 */) return () ( RecycleScroller classscroller :itemsitems.value :item-size50 key-fieldid {{ default: ({ item, index }) ( div classitem 第{index}项: {item.name} /div ) }} /RecycleScroller ) } })4. 谨慎使用...扩展运算符传递props虽然{...props}很方便但它会传递所有props包括子组件可能不需要的。这可能导致不必要的属性被添加到DOM元素上如果子组件是原生HTML元素或者导致子组件进行不必要的props深度检查。尽量显式地传递需要的props。5. 与SFC模板的混合使用与迁移策略你不需要在全项目中二选一。Vue 3允许你在同一个项目中甚至同一个应用中混合使用SFC.vue和JSX.jsx/.tsx组件。这为你提供了渐进式迁移和按需选型的灵活性。5.1 混合使用在SFC中使用JSX渲染函数在一个.vue文件中你可以在script setup或setup函数中返回一个JSX渲染函数。!-- SFCWithJSX.vue -- template !-- 这个template不会生效因为setup返回了渲染函数 -- div这个不会显示/div /template script setup langts import { ref } from vue const count ref(0) // 在 script setup 中以函数名 render 导出的函数会被用作渲染函数 const render () ( div h1我在SFC里用JSX/h1 button onClick{() count.value}点了 {count.value} 次/button /div ) // 导出渲染函数 defineExpose({ render }) // 或者如果你想这个组件只使用JSX渲染可以直接导出render // export default render /script !-- 更常见的做法是使用普通的script块 -- script langts import { defineComponent, ref } from vue export default defineComponent({ setup() { const count ref(0) return () ( div h1我在SFC里用JSX/h1 button onClick{() count.value}点了 {count.value} 次/button /div ) } }) /script在JSX中引用SFC组件这再简单不过了就像引用任何其他Vue组件一样。// JSXComponent.tsx import { defineComponent } from vue import SfcComponent from ./SfcComponent.vue // 直接导入.vue文件 import AnotherJsxComponent from ./AnotherJsxComponent // 导入.jsx/.tsx文件 export default defineComponent({ setup() { return () ( div h2JSX父组件/h2 {/* 像使用普通组件一样使用SFC组件 */} SfcComponent someProphello / AnotherJsxComponent / /div ) } })构建工具如Vite会处理好这一切.vue和.jsx文件都会被正确编译。5.2 从SFC迁移到JSX的渐进策略如果你有一个大型的现有Vue 2/3 SFC项目想逐步尝试JSX可以遵循以下策略新组件用JSX对于新开发的功能模块或独立组件直接使用.tsx编写。这是风险最低的方式。复杂逻辑组件重构找出项目中那些模板逻辑非常复杂嵌套了很多v-if、v-for、v-slot的组件将其重构成JSX组件。这往往能显著提升代码可读性。在SFC内局部使用对于一个现有SFC如果其中某一部分的渲染逻辑特别动态可以先将这部分逻辑提取到一个独立的JSX渲染函数中在SFC的setup里使用。这相当于一次局部的重构。工具函数与渲染逻辑分离JSX鼓励将渲染逻辑视为纯函数。你可以先将组件中复杂的计算属性或方法重构为纯JavaScript函数放在单独的工具文件中。这为后续将模板改为JSX打下了基础。5.3 选择何时使用JSX一个简单的决策树面对一个组件如何决定用SFC还是JSX你可以问自己以下几个问题渲染逻辑是否高度动态依赖复杂的JavaScript表达式如果是JSX可能更清晰。是否需要与TypeScript实现极致的类型安全集成尤其是组件Prop和事件如果是TSX体验更好。组件是否主要作为渲染封装逻辑简单UI结构稳定如果是SFC模板更简洁直观。团队熟悉度如何如果团队主要成员来自React背景或者对JavaScript更熟悉JSX上手更快。如果是纯Vue背景SFC模板心智负担更小。是否需要构建高阶组件HOC或使用渲染函数模式进行高级抽象如果是JSX更自然。没有银弹。在我的实践中我倾向于将JSX用于“逻辑密集型”组件如表单生成器、动态表格、可视化图表封装而将SFC用于“展示密集型”组件如布局容器、静态页面、简单的UI控件。这种混合模式能最大化两种技术的优势。6. 生态工具与周边支持使用JSX开发除了Vue核心周边的工具链支持也很重要。TypeScript配置在你的tsconfig.json中确保启用了JSX相关配置{ compilerOptions: { jsx: preserve, // Vue JSX插件会处理转换所以让TS保留JSX语法 jsxImportSource: vue, // 告诉TS JSX工厂函数来自Vue (Vue 3.3) // 或者对于旧版本可以使用 // jsx: preserve, // jsxFactory: h, // jsxFragmentFactory: Fragment } }jsx: preserve告诉TypeScript不要编译JSX留给Vite/Webpack的Vue插件处理。jsxImportSource: vue是Vue 3.3引入的用于更好的类型支持。IDE支持VSCodeVolar这是目前Vue开发的官方推荐语言工具。它对.vue和.jsx/.tsx都提供了绝佳的支持包括语法高亮、类型提示、自动补全、跳转到定义等。确保禁用旧的Vetur插件。TypeScript Vue Plugin (Volar)安装Volar时通常会同时安装这个插件它专门用于在.ts/.tsx文件中提供Vue相关的智能提示。ESLint Prettier配置ESLint规则集如vue/eslint-config-typescript和Prettier来保持代码风格统一。Prettier有专门的Vue/JSX格式化规则。测试使用vue/test-utils测试JSX组件与测试SFC组件没有本质区别。你仍然可以使用mount或shallowMount。因为JSX组件最终编译成渲染函数测试工具对待它们的方式是一样的。import { mount } from vue/test-utils import MyJsxComponent from ./MyJsxComponent test(renders correctly, () { const wrapper mount(MyJsxComponent, { props: { msg: Hello } }) expect(wrapper.text()).toContain(Hello) })SSR (Nuxt.js)如果你使用Nuxt.js进行服务端渲染从Nuxt 3开始其对Vue 3和JSX的支持是开箱即用的。你可以在Nuxt项目的components/目录下直接放置.tsx文件它们会被自动识别和导入。Nuxt的构建层基于Vite同样会使用vitejs/plugin-vue-jsx插件。7. 总结与个人实践心得回过头看在Vue 3中“巧妙”运用JSX其精髓不在于追求语法的新奇而在于选择正确的工具解决正确的问题。JSX不是用来替代SFC模板的它是模板能力的一个强大补充尤其在处理渲染逻辑与JavaScript代码深度耦合的场景时它能提供更直观、更类型安全、更富表达力的开发体验。从我个人的项目经验来看有几点体会特别深刻第一从“声明式”到“命令式”的思维转变需要适应期。刚开始写JSX时总会不自觉地想去寻找对应的v-指令。但一旦你习惯了用、三元表达式和map来表达条件与循环你会发现这种“一切皆JavaScript”的自由度能让你更流畅地实现复杂的交互逻辑。特别是当你需要根据一个复杂对象的状态来动态决定渲染数十种不同的UI变体时一个清晰的switch语句或一系列if-return语句远比在模板里嵌套多个template v-if要容易维护得多。第二TypeScript与JSX的结合是“王炸”。这可能是促使我越来越多地使用TSX的最大动力。在组件契约Props、Emits、Slots上获得的类型安全极大地减少了组件间协作的bug。当你重构一个组件修改了某个Prop的类型所有使用它的父组件都会立刻在IDE里报错而不是等到运行时才崩溃。这种开发体验的提升是实实在在的。第三警惕“过度灵活”导致的混乱。JSX的灵活性是一把双刃剑。我曾经在一个早期项目中因为过度使用内联函数和复杂的逻辑表达式导致某个组件的渲染函数变成了一个长达300行的“巨无霸”难以理解和调试。后来我定下了一个简单的规则如果渲染函数的主体逻辑超过了50行或者嵌套层级超过3层就必须考虑拆分子组件、提取工具函数或使用计算属性。保持每个渲染函数的简洁和单一职责是维持JSX代码可维护性的关键。第四混合技术栈并不可怕但需要约定。在一个项目中同时存在.vue和.tsx文件只要团队有明确的约定比如“业务页面用SFC通用底层UI组件库用TSX”并不会造成混乱。反而这种按需选型的能力让团队可以更灵活地应对不同的需求。Vue 3的架构很好地支持了这种混合模式。最后我的建议是不要因为JSX“很酷”就去用它也不要因为习惯了模板而排斥它。下次当你面对一个渲染逻辑特别棘手、模板写起来感觉别扭的组件时不妨新建一个.tsx文件试试。从一个小组件开始体验一下在JavaScript的海洋里畅快编写UI的感觉。你可能会惊喜地发现它为你打开了另一扇窗。 Vue 3中JSX的巧妙运用：从模板到渲染函数的进阶指南
1. 从“模板”到“代码”为什么要在Vue 3里考虑JSX如果你是从React生态转过来的开发者看到这个问题可能会觉得有点奇怪——JSX不是React的标配吗怎么在Vue里还需要“巧妙运用”而对于长期深耕Vue生态、习惯了.vue单文件组件SFC和模板语法的朋友来说JSX可能更像一个“熟悉的陌生人”知道Vue支持但总觉得那是给“另一拨人”用的或者只在渲染函数这种高级场景里偶尔露个脸。我得说这种想法在Vue 2时代或许成立但在Vue 3的今天是时候重新审视JSX了。Vue 3在底层设计上拥抱了更灵活的渲染机制其响应式系统和组合式APIComposition API的核心理念与JSX这种声明式、基于JavaScript的UI描述方式其实有着惊人的契合度。我并不是说SFC模板不好——它在绝大多数场景下依然是清晰、高效且Vue味十足的最佳选择。但当你遇到一些特定场景时比如需要极致动态的渲染逻辑、复杂的条件分支嵌套、或者需要与TypeScript进行深度类型集成时JSX能提供一种更“原生”的JavaScript编程体验。简单来说你可以把Vue的模板看作一门为UI定制的、声明式的领域特定语言DSL它优雅、简洁但有其固定的语法边界。而JSX则是JavaScript语法在UI描述上的一次扩展它让你能在熟悉的JavaScript环境里用if/else、map、reduce这些最基础的编程原语来构建视图。这种“什么都能写”的自由度既是它的魅力也是需要“巧妙运用”的原因——用不好就容易写出难以维护的“面条代码”。所以这篇文章不是一篇“非此即彼”的站队文而是一份“工具使用指南”。我会结合具体的场景聊聊在Vue 3项目中哪些情况下JSX能成为你的秘密武器以及如何规避它的常见陷阱让它真正为你的开发效率和代码质量加分。2. 环境搭建与基础心智模型转换在开始写第一行JSX之前我们得先把场子搭起来。这不仅仅是安装一个插件那么简单更涉及到从“模板思维”到“JSX思维”的转换。2.1 项目配置让Vite认识JSX现在Vue 3的新项目十有八九是用Vite作为构建工具的。要让Vite支持Vue 3中的JSX更准确地说在Vue语境下常被称为TSX当与TypeScript结合时你需要安装官方的插件。npm install vitejs/plugin-vue-jsx -D # 或 yarn add vitejs/plugin-vue-jsx -D # 或 pnpm add vitejs/plugin-vue-jsx -D然后在你的vite.config.ts中引入并配置它// vite.config.ts import { defineConfig } from vite import vue from vitejs/plugin-vue import vueJsx from vitejs/plugin-vue-jsx export default defineConfig({ plugins: [ vue(), vueJsx(), // 放在vue插件之后 ], })这个vitejs/plugin-vue-jsx插件非常关键它做了两件核心事一是接管了.jsx和.tsx文件的编译将它们转换为Vue能理解的渲染函数二是注入了Vue JSX转换所需的运行时帮助函数。没有它你的JSX语法在Vue项目里就是一堆无法识别的标记。注意如果你在配置后运行项目遇到了类似error [err_module_not_found]: cannot find package vite imported from的错误这通常不是JSX插件的问题而是你的项目根目录下可能缺少了node_modules或者vite本身没有正确安装。请先确保执行了npm install安装了所有依赖。配置好后你就可以创建.jsx或.tsx后缀的文件了。我个人更推荐直接使用.tsx即使你一开始不打算写复杂的类型TypeScript也能为JSX提供更好的语法提示和错误检查。2.2 核心语法差异告别v-指令拥抱JavaScript这是思维转换的第一步也是最重要的一步。在SFC模板中我们通过v-if、v-for、v-on这些指令来告诉Vue“做什么”。而在JSX中这些概念全部回归到最基础的JavaScript。1. 条件渲染v-ifvs和三元表达式在模板里你写div v-ifisVisible我会出现/div div v-else否则我出现/div在JSX里你直接写JavaScriptconst MyComponent () { return ( div {isVisible ? div我会出现/div : div否则我出现/div} {/* 或者更简单的逻辑 */} {isVisible div只有为真时我才渲染/div} /div ) }你会发现逻辑变得更“内聚”了。条件判断就写在它控制的元素旁边不需要在模板里跳来跳去找对应的v-else。2. 列表渲染v-forvsArray.map()模板写法ul li v-foritem in list :keyitem.id{{ item.name }}/li /ulJSX写法const MyComponent ({ list }) { return ( ul {list.map(item ( li key{item.id}{item.name}/li ))} /ul ) }map是任何JavaScript开发者都熟悉的数组方法用它来渲染列表非常自然。千万记得写key这是Vue用来追踪节点身份的核心机制在JSX里它就是一个普通的prop但在列表渲染中不可或缺否则可能导致诡异的渲染错误或性能问题。3. 事件处理v-onvsonXxx模板写法button clickhandleClick点击/buttonJSX写法const MyComponent () { const handleClick (event) { console.log(Clicked!, event) } return button onClick{handleClick}点击/button }事件监听器的属性名遵循驼峰命名法onClick、onInput其值直接传入一个函数引用。这里有一个重要的细节在Vue模板中clickhandleClick会自动处理为handleClick($event)。而在JSX中你传入的就是函数本身事件对象会作为第一个参数自动传入。如果你需要传递额外参数需要用一个箭头函数包裹button onClick{(e) handleClick(id, e)}点击/button4. 动态属性与v-bind模板中绑定多个属性你可能用v-bindobject。在JSX中你可以直接使用ES6的扩展运算符这简直是为JSX量身定做的const attrs { id: my-id, class: container, data-test: button } return div {...attrs}内容/div绑定单个属性则更简单用花括号{}包裹JavaScript表达式即可return div className{isActive ? active : } style{{ color: textColor }}内容/div注意class在JSX中要写成className与DOM API一致style接受一个对象而不是模板中的字符串。2.3 定义组件函数式与响应式在JSX文件中你定义组件的方式主要有两种对应Vue 3的两种组件风格。1. 函数式组件推荐在简单场景使用这更像React的函数组件直接返回一个JSX元素。它没有内部状态不使用ref,reactive主要依靠props。// Hello.tsx import { defineComponent } from vue // 使用 defineComponent 可以获得更好的类型提示 export default defineComponent({ name: Hello, props: { msg: String }, setup(props) { // setup 函数可以在这里处理逻辑 return () ( // 注意必须返回一个渲染函数 div h1{props.msg}/h1 /div ) } })或者使用更简洁的语法糖需要Vue 3.3// 使用 script setup 风格的语法糖在 .tsx 中 import { withDefaults, defineProps } from vue interface Props { msg: string count?: number } // 定义props const props withDefaults(definePropsProps(), { count: 0 }) // 直接编写渲染逻辑 const render () ( div h1{props.msg}/h1 pCount: {props.count}/p /div ) export default render // 导出渲染函数2. 使用组合式API的响应式组件这是更强大和常用的方式你可以在setup函数中使用ref,reactive,computed,watch等所有Vue响应式API。import { defineComponent, ref, computed } from vue export default defineComponent({ name: Counter, setup() { const count ref(0) const double computed(() count.value * 2) const increment () { count.value } // 返回渲染函数可以访问所有响应式状态和方法 return () ( div pCount: {count.value}/p pDouble: {double.value}/p button onClick{increment}1/button /div ) } })这里的关键点是setup函数返回的是一个渲染函数而不是直接返回JSX元素。这个渲染函数会在响应式数据变化时被自动调用。在函数内部你可以像写普通JavaScript一样使用count.value来访问ref的值。3. JSX的“杀手级”应用场景了解了基础语法后我们来看看JSX在哪些场景下能真正发挥出它的优势让你觉得“这用模板写起来真别扭还是JSX香”。3.1 场景一高度动态的渲染逻辑这是JSX最核心的优势所在。当你的组件渲染结构需要根据复杂的数据结构或运行时状态动态生成时JSX的威力就显现出来了。假设你要渲染一个基于JSON配置的动态表单配置可能长这样[ { type: input, label: 姓名, field: name }, { type: select, label: 城市, field: city, options: [北京, 上海] }, { type: checkbox, label: 同意协议, field: agreement } ]在SFC模板中你可能会写一堆v-if、v-else-if来判断type或者用一个动态组件component :is...。但用JSX你可以写成一个非常清晰的渲染函数import { defineComponent } from vue interface FieldConfig { type: input | select | checkbox label: string field: string options?: string[] } export default defineComponent({ props: { config: { type: Array as PropTypeFieldConfig[], required: true }, modelValue: { type: Object, required: true } }, emits: [update:modelValue], setup(props, { emit }) { const updateValue (field: string, value: any) { emit(update:modelValue, { ...props.modelValue, [field]: value }) } return () ( form {props.config.map((item) { // 根据类型动态渲染不同的表单控件 switch (item.type) { case input: return ( div classform-item key{item.field} label{item.label}/label input typetext value{props.modelValue[item.field] || } onInput{(e) updateValue(item.field, (e.target as HTMLInputElement).value)} / /div ) case select: return ( div classform-item key{item.field} label{item.label}/label select value{props.modelValue[item.field] || } onChange{(e) updateValue(item.field, (e.target as HTMLSelectElement).value)} option value请选择/option {item.options?.map(opt ( option value{opt} key{opt}{opt}/option ))} /select /div ) case checkbox: return ( div classform-item key{item.field} label input typecheckbox checked{!!props.modelValue[item.field]} onChange{(e) updateValue(item.field, (e.target as HTMLInputElement).checked)} / {item.label} /label /div ) default: return null } })} /form ) } })这段代码的清晰度在于渲染逻辑和业务逻辑是内聚在一起的。switch语句的每个case直接返回对应的JSX元素你可以很容易地看到每种配置类型对应什么样的UI。如果要新增一种type比如textarea你只需要添加一个case分支即可。在模板中实现同样的功能要么需要定义多个子组件并用v-if切换要么使用动态组件但逻辑的连贯性会差一些。3.2 场景二作用域插槽Scoped Slots的灵活运用作用域插槽是Vue一个非常强大的特性它允许子组件向父组件的插槽内容传递数据。在模板中它的语法是v-slot或#default。在JSX中作用域插槽的写法更加“函数式”理解起来也更直观。子组件 (Child.jsx)import { defineComponent } from vue export default defineComponent({ setup(props, { slots }) { const userData { name: 张三, age: 25, city: 北京 } // 返回渲染函数 return () { // 检查是否有默认插槽并以函数形式调用它传入数据 return ( div classchild h3子组件区域/h3 {slots.default ? slots.default(userData) : p默认内容/p} {/* 如果有命名插槽也可以同样处理 */} {slots.footer slots.footer({ timestamp: new Date().toISOString() })} /div ) } } })父组件中使用 (Parent.jsx)import { defineComponent } from vue import Child from ./Child.jsx export default defineComponent({ setup() { return () ( div h2父组件/h2 Child {/** 这里是一个函数接收子组件传递过来的数据 */} {(slotProps: { name: string; age: number; city: string }) ( div p来自子组件的数据/p ul li姓名{slotProps.name}/li li年龄{slotProps.age}/li li城市{slotProps.city}/li /ul /div )} {/** 命名插槽的写法通过 v-slots 属性传递一个对象 */} {{ footer: (props: { timestamp: string }) ( div style{{ marginTop: 20px, fontSize: 0.8em }} 页脚 - 生成于{new Date(props.timestamp).toLocaleString()} /div ) }} /Child /div ) } })在JSX中作用域插槽就是一个返回JSX的函数。子组件通过slots.default(...)调用这个函数并传入数据父组件则在子组件标签内部直接以函数的形式定义这个插槽内容。这种写法让数据流变得异常清晰你一眼就能看出哪些数据是从子组件传上来的父组件又是如何消费这些数据的。对于需要复杂数据交互的可复用组件如表单封装、数据列表项渲染等这种模式非常高效。3.3 场景三与TypeScript的深度集成如果你使用TypeScript那么JSXTSX带来的类型安全体验是模板难以比拟的。Vue 3本身对TypeScript支持极佳结合TSX你几乎可以在编写视图时获得全链路的类型提示和检查。1. 组件Props的类型安全import { defineComponent, PropType } from vue interface User { id: number name: string email: string avatar?: string // 可选属性 } export default defineComponent({ name: UserCard, props: { // 使用 PropType 进行运行时类型声明同时为TS提供类型 user: { type: Object as PropTypeUser, required: true }, showEmail: { type: Boolean, default: false }, onSelect: { type: Function as PropType(user: User) void, default: undefined } }, setup(props) { // 在这里props.user 的类型是 User // props.onSelect 的类型是 ((user: User) void) | undefined const handleClick () { if (props.onSelect) { props.onSelect(props.user) // 类型安全知道传入的是User对象 } } return () ( div classuser-card onClick{handleClick} {props.user.avatar img src{props.user.avatar} alt{props.user.name} /} h4{props.user.name}/h4 {props.showEmail p{props.user.email}/p} /div ) } })当你在其他组件中使用UserCard时如果你的IDE支持TypeScript如VSCode你会得到完美的自动补全和类型错误提示。如果你传了一个不符合User接口的对象或者漏掉了required的属性在编写代码时就能立刻发现而不是等到运行时。2. 渲染函数的返回类型在setup返回的渲染函数中TypeScript可以推断出你返回的JSX元素类型。虽然这通常不是问题但在一些高级场景比如编写高阶组件HOC时明确的返回类型很有帮助。3. 事件处理函数的参数类型在模板中事件处理函数的参数类型往往需要你手动声明。而在TSX中事件对象如MouseEvent,KeyboardEvent和自定义事件参数的类型可以清晰地定义和推断。const handleInput (e: Event) { const target e.target as HTMLInputElement console.log(target.value) // TypeScript知道target有value属性 } return input onInput{handleInput} /3.4 场景四构建高阶组件HOC与渲染劫持高阶组件在React中是一种常见的复用逻辑的模式。在Vue中虽然组合式API和Composables是首选的逻辑复用方式但有时你仍然需要创建一个组件它包装另一个组件并增强其功能。JSX在这种模式下写起来非常顺手。假设我们要创建一个withLoading高阶组件它在数据加载时显示一个加载指示器// withLoading.tsx import { defineComponent, h, ComponentPublicInstance } from vue // 这是一个函数接收一个组件作为参数返回一个新的增强组件 export function withLoading(WrappedComponent: any) { return defineComponent({ name: WithLoading${WrappedComponent.name || }, props: { loading: { type: Boolean, default: false }, // 其他原组件的props会通过 ...this.$props 传递下去 }, setup(props, { slots, attrs }) { return () { if (props.loading) { return div classloading-indicator加载中.../div } // 渲染被包装的组件并传递所有的props、attrs和slots return h(WrappedComponent, { ...props, ...attrs }, slots) } } }) } // 使用示例一个普通的展示组件 const UserProfile defineComponent({ props: [user], setup(props) { return () div用户名{props.user?.name}/div } }) // 增强后的组件 const UserProfileWithLoading withLoading(UserProfile) // 在另一个组件中使用 export default defineComponent({ setup() { const user ref(null) const loading ref(true) onMounted(async () { const data await fetchUser() user.value data loading.value false }) return () ( div UserProfileWithLoading loading{loading.value} user{user.value} / /div ) } })在这个例子中withLoading函数接受一个组件返回一个新的组件。新组件根据loadingprop决定是渲染加载状态还是渲染原组件。使用h函数createElement的别名来动态创建被包装组件的VNode。这种模式在JSX中非常自然因为组件本身就是函数或对象可以像普通值一样被传递和组合。4. 避坑指南与性能优化JSX给了你强大的灵活性但“能力越大责任越大”。如果不加注意很容易掉进一些坑里或者写出性能不佳的代码。4.1 常见陷阱与解决方案陷阱一忘记setup返回渲染函数这是新手最容易犯的错误。在JSX组件中setup函数必须返回一个函数即渲染函数而不是直接返回JSX或VNode。// 错误 setup() { const count ref(0) return div{count.value}/div // 直接返回了JSX不会响应式更新 } // 正确 setup() { const count ref(0) return () div{count.value}/div // 返回一个函数 }原因在于Vue的响应式系统需要追踪依赖。当setup返回一个函数时Vue会在响应式数据变化时重新执行这个函数生成新的VNode。如果直接返回静态的VNode数据变化了视图也不会更新。陷阱二在渲染函数中产生副作用渲染函数应该是纯函数它只根据props和state计算并返回VNode。绝对不要在渲染函数内部执行如修改数据、发起网络请求、操作DOM等副作用。// 错误在渲染函数中修改响应式数据 return () { count.value // 这会导致无限重新渲染 return div{count.value}/div } // 错误在渲染函数中发起请求 return () { fetchData() // 每次渲染都会发起请求可能导致请求风暴 return div.../div }副作用应该放在setup函数的主体部分、生命周期钩子onMounted,onUpdated等或watch/watchEffect中。陷阱三不稳定的key在列表渲染时key必须是稳定、唯一且可预测的。使用数组索引index作为key在列表项顺序会改变时如排序、过滤、插入是灾难性的会导致Vue错误地复用DOM节点引发状态错乱。// 不佳使用索引作为key {items.map((item, index) ( ListItem key{index} item{item} / ))} // 推荐使用数据中唯一且稳定的ID {items.map(item ( ListItem key{item.id} item{item} / ))}陷阱四事件处理函数导致不必要的重新渲染在JSX中如果你在渲染函数内部定义事件处理函数每次重新渲染都会创建一个新的函数实例。对于子组件来说这可能导致其不必要的重新渲染因为props变了。const MyComponent () { const handleClick () { /* ... */ } // 每次渲染都创建新函数 return Child onClick{handleClick} / }优化方案是使用useMemoVue中对应computed或useMemofromvueuse/core缓存函数或者将函数定义移到setup作用域外层如果它不依赖响应式状态。import { ref, defineComponent } from vue export default defineComponent({ setup() { const count ref(0) // 将函数定义在setup作用域内但依赖项变化时它不会变除非你希望它变 const handleClick () { count.value } return () ( button onClick{handleClick}点击了 {count.value} 次/button ) } })在这个例子中handleClick在组件实例的生命周期内是稳定的因为它被定义在setup函数内部但闭包引用了count。每次渲染时返回的渲染函数中onClick指向的都是同一个handleClick函数引用。4.2 性能优化要点1. 合理使用memo/shouldComponentUpdate在Vue 3中你可以使用defineComponent的setup函数配合响应式系统的精细控制来避免不必要的子组件渲染。但对于函数式组件或简单组件有时你希望明确告诉Vue“只有当某些props变化时才重新渲染我”。你可以手动实现或者使用第三方工具。Vue 3本身没有直接的React.memo等价物因为其响应式系统通常能自动优化。但你可以通过computed或watch来精确控制。一个常见的模式是将可能频繁变化但子组件不关心的数据“提升”到父组件或者使用v-memo指令在模板中。在JSX中你需要更自觉地组织数据和组件结构。2. 避免在JSX中内联复杂的对象或函数和内联事件处理函数类似内联对象字面量也会导致每次渲染都创建新引用。// 不佳每次渲染都创建新的style对象 return div style{{ color: red, fontSize: 14px }}内容/div // 优化将静态对象提取到组件外部或使用ref/computed const staticStyle { color: red, fontSize: 14px } // 或在setup中 const style computed(() ({ color: isActive.value ? red : black, fontSize: 14px }))对于静态样式提取为常量。对于动态样式使用computed创建响应式引用。3. 大型列表的虚拟滚动如果你需要渲染成百上千的列表项直接使用map渲染所有DOM节点会严重影响性能。此时应该考虑虚拟滚动方案。在Vue生态中你可以使用像vue-virtual-scroller这样的库。在JSX中集成虚拟滚动库通常也很直接因为虚拟滚动组件本身就是一个接收渲染函数作为插槽的组件。import { RecycleScroller } from vue-virtual-scroller import vue-virtual-scroller/dist/vue-virtual-scroller.css export default defineComponent({ setup() { const items ref(/* 大型数组 */) return () ( RecycleScroller classscroller :itemsitems.value :item-size50 key-fieldid {{ default: ({ item, index }) ( div classitem 第{index}项: {item.name} /div ) }} /RecycleScroller ) } })4. 谨慎使用...扩展运算符传递props虽然{...props}很方便但它会传递所有props包括子组件可能不需要的。这可能导致不必要的属性被添加到DOM元素上如果子组件是原生HTML元素或者导致子组件进行不必要的props深度检查。尽量显式地传递需要的props。5. 与SFC模板的混合使用与迁移策略你不需要在全项目中二选一。Vue 3允许你在同一个项目中甚至同一个应用中混合使用SFC.vue和JSX.jsx/.tsx组件。这为你提供了渐进式迁移和按需选型的灵活性。5.1 混合使用在SFC中使用JSX渲染函数在一个.vue文件中你可以在script setup或setup函数中返回一个JSX渲染函数。!-- SFCWithJSX.vue -- template !-- 这个template不会生效因为setup返回了渲染函数 -- div这个不会显示/div /template script setup langts import { ref } from vue const count ref(0) // 在 script setup 中以函数名 render 导出的函数会被用作渲染函数 const render () ( div h1我在SFC里用JSX/h1 button onClick{() count.value}点了 {count.value} 次/button /div ) // 导出渲染函数 defineExpose({ render }) // 或者如果你想这个组件只使用JSX渲染可以直接导出render // export default render /script !-- 更常见的做法是使用普通的script块 -- script langts import { defineComponent, ref } from vue export default defineComponent({ setup() { const count ref(0) return () ( div h1我在SFC里用JSX/h1 button onClick{() count.value}点了 {count.value} 次/button /div ) } }) /script在JSX中引用SFC组件这再简单不过了就像引用任何其他Vue组件一样。// JSXComponent.tsx import { defineComponent } from vue import SfcComponent from ./SfcComponent.vue // 直接导入.vue文件 import AnotherJsxComponent from ./AnotherJsxComponent // 导入.jsx/.tsx文件 export default defineComponent({ setup() { return () ( div h2JSX父组件/h2 {/* 像使用普通组件一样使用SFC组件 */} SfcComponent someProphello / AnotherJsxComponent / /div ) } })构建工具如Vite会处理好这一切.vue和.jsx文件都会被正确编译。5.2 从SFC迁移到JSX的渐进策略如果你有一个大型的现有Vue 2/3 SFC项目想逐步尝试JSX可以遵循以下策略新组件用JSX对于新开发的功能模块或独立组件直接使用.tsx编写。这是风险最低的方式。复杂逻辑组件重构找出项目中那些模板逻辑非常复杂嵌套了很多v-if、v-for、v-slot的组件将其重构成JSX组件。这往往能显著提升代码可读性。在SFC内局部使用对于一个现有SFC如果其中某一部分的渲染逻辑特别动态可以先将这部分逻辑提取到一个独立的JSX渲染函数中在SFC的setup里使用。这相当于一次局部的重构。工具函数与渲染逻辑分离JSX鼓励将渲染逻辑视为纯函数。你可以先将组件中复杂的计算属性或方法重构为纯JavaScript函数放在单独的工具文件中。这为后续将模板改为JSX打下了基础。5.3 选择何时使用JSX一个简单的决策树面对一个组件如何决定用SFC还是JSX你可以问自己以下几个问题渲染逻辑是否高度动态依赖复杂的JavaScript表达式如果是JSX可能更清晰。是否需要与TypeScript实现极致的类型安全集成尤其是组件Prop和事件如果是TSX体验更好。组件是否主要作为渲染封装逻辑简单UI结构稳定如果是SFC模板更简洁直观。团队熟悉度如何如果团队主要成员来自React背景或者对JavaScript更熟悉JSX上手更快。如果是纯Vue背景SFC模板心智负担更小。是否需要构建高阶组件HOC或使用渲染函数模式进行高级抽象如果是JSX更自然。没有银弹。在我的实践中我倾向于将JSX用于“逻辑密集型”组件如表单生成器、动态表格、可视化图表封装而将SFC用于“展示密集型”组件如布局容器、静态页面、简单的UI控件。这种混合模式能最大化两种技术的优势。6. 生态工具与周边支持使用JSX开发除了Vue核心周边的工具链支持也很重要。TypeScript配置在你的tsconfig.json中确保启用了JSX相关配置{ compilerOptions: { jsx: preserve, // Vue JSX插件会处理转换所以让TS保留JSX语法 jsxImportSource: vue, // 告诉TS JSX工厂函数来自Vue (Vue 3.3) // 或者对于旧版本可以使用 // jsx: preserve, // jsxFactory: h, // jsxFragmentFactory: Fragment } }jsx: preserve告诉TypeScript不要编译JSX留给Vite/Webpack的Vue插件处理。jsxImportSource: vue是Vue 3.3引入的用于更好的类型支持。IDE支持VSCodeVolar这是目前Vue开发的官方推荐语言工具。它对.vue和.jsx/.tsx都提供了绝佳的支持包括语法高亮、类型提示、自动补全、跳转到定义等。确保禁用旧的Vetur插件。TypeScript Vue Plugin (Volar)安装Volar时通常会同时安装这个插件它专门用于在.ts/.tsx文件中提供Vue相关的智能提示。ESLint Prettier配置ESLint规则集如vue/eslint-config-typescript和Prettier来保持代码风格统一。Prettier有专门的Vue/JSX格式化规则。测试使用vue/test-utils测试JSX组件与测试SFC组件没有本质区别。你仍然可以使用mount或shallowMount。因为JSX组件最终编译成渲染函数测试工具对待它们的方式是一样的。import { mount } from vue/test-utils import MyJsxComponent from ./MyJsxComponent test(renders correctly, () { const wrapper mount(MyJsxComponent, { props: { msg: Hello } }) expect(wrapper.text()).toContain(Hello) })SSR (Nuxt.js)如果你使用Nuxt.js进行服务端渲染从Nuxt 3开始其对Vue 3和JSX的支持是开箱即用的。你可以在Nuxt项目的components/目录下直接放置.tsx文件它们会被自动识别和导入。Nuxt的构建层基于Vite同样会使用vitejs/plugin-vue-jsx插件。7. 总结与个人实践心得回过头看在Vue 3中“巧妙”运用JSX其精髓不在于追求语法的新奇而在于选择正确的工具解决正确的问题。JSX不是用来替代SFC模板的它是模板能力的一个强大补充尤其在处理渲染逻辑与JavaScript代码深度耦合的场景时它能提供更直观、更类型安全、更富表达力的开发体验。从我个人的项目经验来看有几点体会特别深刻第一从“声明式”到“命令式”的思维转变需要适应期。刚开始写JSX时总会不自觉地想去寻找对应的v-指令。但一旦你习惯了用、三元表达式和map来表达条件与循环你会发现这种“一切皆JavaScript”的自由度能让你更流畅地实现复杂的交互逻辑。特别是当你需要根据一个复杂对象的状态来动态决定渲染数十种不同的UI变体时一个清晰的switch语句或一系列if-return语句远比在模板里嵌套多个template v-if要容易维护得多。第二TypeScript与JSX的结合是“王炸”。这可能是促使我越来越多地使用TSX的最大动力。在组件契约Props、Emits、Slots上获得的类型安全极大地减少了组件间协作的bug。当你重构一个组件修改了某个Prop的类型所有使用它的父组件都会立刻在IDE里报错而不是等到运行时才崩溃。这种开发体验的提升是实实在在的。第三警惕“过度灵活”导致的混乱。JSX的灵活性是一把双刃剑。我曾经在一个早期项目中因为过度使用内联函数和复杂的逻辑表达式导致某个组件的渲染函数变成了一个长达300行的“巨无霸”难以理解和调试。后来我定下了一个简单的规则如果渲染函数的主体逻辑超过了50行或者嵌套层级超过3层就必须考虑拆分子组件、提取工具函数或使用计算属性。保持每个渲染函数的简洁和单一职责是维持JSX代码可维护性的关键。第四混合技术栈并不可怕但需要约定。在一个项目中同时存在.vue和.tsx文件只要团队有明确的约定比如“业务页面用SFC通用底层UI组件库用TSX”并不会造成混乱。反而这种按需选型的能力让团队可以更灵活地应对不同的需求。Vue 3的架构很好地支持了这种混合模式。最后我的建议是不要因为JSX“很酷”就去用它也不要因为习惯了模板而排斥它。下次当你面对一个渲染逻辑特别棘手、模板写起来感觉别扭的组件时不妨新建一个.tsx文件试试。从一个小组件开始体验一下在JavaScript的海洋里畅快编写UI的感觉。你可能会惊喜地发现它为你打开了另一扇窗。