code前端网1.Vue2里的JSX是啥？和React JSX有啥区别？
不少做Vue2项目开发的小伙伴，经常纠结「Vue2里用JSX到底值不值？JSX在Vue2开发中要咋用才高效？」其实JSX和Vue2的搭配，能解决模板语法里的不少痛点，今天咱就用问答的方式，把Vue2 JSX从基础到实战的事儿聊明白。
首先得明确，Vue2本身默认用的是模板语法（.vue里的``），但JSX是一种“在JS里写HTML结构”的语法，Vue2要支持JSX，得靠 `babel-plugin-transform-vue-jsx` 这类Babel插件，把JSX编译成Vue能识别的**渲染函数（render function）**。那和React JSX区别在哪？核心是编译目标不同：React的JSX编译后返回的是React.createElement（生成虚拟DOM），而Vue2的JSX编译后返回的是Vue的createElement（生成VNode），Vue的JSX能结合自身特性，比如可以在JSX里处理 v-bind v-on 的逻辑，但写法和模板不一样（比如事件绑定是 onClick 而不是 @click）；React则是纯JS逻辑驱动渲染，没有Vue的指令体系残留。
简单说，Vue2的JSX是“披着JSX皮的Vue渲染函数”，既保留JS的灵活性，又能对接Vue的响应式系统。
Vue2项目里，啥场景适合用JSX？
不是所有场景都得用JSX，这些情况用JSX能省事儿：
-
复杂条件渲染：模板里多层
v-if嵌套（比如三四个层级），换成JS的if/else或switch逻辑更直观，比如权限控制下，不同角色渲染完全不同的页面结构，用JSX写分支判断比模板里堆v-if清爽多了。 -
动态组件渲染：需要根据变量动态切换组件（比如表单里不同类型字段渲染不同输入组件），JSX里可以直接用变量当组件名（
const Comp = type === 'A' ? CompA : CompB; return <Comp />;），比模板里用<component :is=""/>更灵活，还能顺手传props和事件。 -
函数式组件：Vue2的函数式组件（无状态、无实例）用JSX写更简洁，比如写个纯展示的列表项组件，函数式组件返回JSX，不用写
template标签，代码量少一半。 -
复用渲染逻辑：如果多个组件有重复的渲染逻辑（比如都要渲染带样式的标题+内容），把这部分抽成JS函数返回JSX，比模板里用
slot或mixin更可控，函数里能直接写JS逻辑，不用在模板和JS之间来回跳。
Vue2项目咋配置JSX环境？
得先让项目能识别JSX语法，步骤分两种情况：
-
用Vue CLI创建项目：新建项目时，选“Manually select features”，然后勾上“Babel”（负责转译JSX），后续安装依赖时，Vue CLI会自动处理JSX相关配置。
-
手动配置已有项目：需要装两个核心依赖：
@vue/babel-preset-jsx（Vue官方的JSX预设，替代旧的babel-plugin-transform-vue-jsx）@vue/babel-helper-vue-jsx-merge-props（辅助处理props合并）
然后在
babel.config.js里配置：module.exports = { presets: ['@vue/cli-plugin-babel/preset', '@vue/babel-preset-jsx'] };
配置好后，组件里就能写 render 函数返回JSX了，
export default {
render() {
return <div>这是JSX渲染的内容</div>;
}
};
Vue2 JSX的基础语法咋写？
语法和React JSX像，但细节得贴合Vue2的特性，分几块说：
-
组件渲染：先导入组件，然后像HTML标签一样用，传props直接写
props={...}，事件绑定用onEventName={回调函数}。import MyButton from './MyButton.vue'; render() { return ( <MyButton label="点击" onTap={this.handleTap} disabled={this.isDisabled} /> ); } -
数据绑定：
- class：动态class可以用对象语法
{...{ active: this.isActive }}，也能数组语法{['btn', { 'btn-active': this.isActive }]}。 - style：直接传对象
style={this.styleObj}，对象里写CSS属性（驼峰式，fontSize: '16px'）。 - 普通属性：
id={this.itemId}，动态绑定属性值。
- class：动态class可以用对象语法
-
事件处理：Vue模板里的
@click换成onClick，自定义事件（比如子组件的@my-event）写成onMyEvent，注意：模板里的事件修饰符（.stop .prevent）在JSX里得手动处理！比如阻止冒泡，要在回调里写e.stopPropagation()：handleClick(e) { e.stopPropagation(); // 其他逻辑 } render() { return <button onClick={this.handleClick}>点我</button>; } -
条件渲染：和JS逻辑一致，用
if/else或者短路运算（{this.show && <div>内容</div>}），比如多分支判断：render() { if (this.status === 'loading') { return <Loading />; } else if (this.status === 'error') { return <ErrorMsg msg={this.errMsg} />; } return <MainContent data={this.data} />; } -
列表渲染：用数组的
map方法，记得加key！render() { return ( <ul> {this.list.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); }
JSX和Vue2模板语法比，优势在哪？
很多人觉得“模板语法更直观”，但JSX在这些场景能碾压：
-
灵活性：JS原生逻辑自由发挥：模板里写循环得用
v-for，条件得用v-if，还得记指令的特殊语法（v-for里的key要写在标签上），JSX里直接用map、if/else，和写普通JS代码没区别，复杂逻辑（比如嵌套循环+条件）写起来更顺。 -
复用性：渲染逻辑能抽成函数/模块：模板里复用结构得用
slot、component或者mixin，但这些方式对“动态渲染逻辑”支持一般，JSX可以把渲染部分写成纯函数（function renderItem(item) { return <div>{item.text}</div>; }），哪里需要哪里调，复用成本极低。 -
性能：复杂场景可控性更强：Vue的模板会被编译成渲染函数，但遇到极复杂的渲染（比如上百个动态节点），JSX写的渲染函数能手动做优化（比如局部更新逻辑），虽然Vue2本身是响应式，但JSX让开发者对渲染过程有更细的掌控力。
-
团队协作：降低跨框架学习成本：如果团队里有React开发者，JSX对他们来说无门槛，不用重新学Vue模板的指令系统，代码风格更统一，协作效率更高。
Vue2 JSX开发时容易踩哪些坑？
用JSX时这些细节得注意，不然容易出bug：
-
作用域和this指向：如果在JSX里用箭头函数写回调，要注意
this指向。onClick={() => this.handleClick()}没问题，但如果把方法写成普通函数（handleClick() { ... }），要确保this没丢，建议用箭头函数定义方法（handleClick = () => { ... }），或者在构造函数里绑定this。 -
事件修饰符得手动处理：模板里的
.stop.prevent这些修饰符，JSX里没有语法糖，得自己在事件回调里写e.stopPropagation()、e.preventDefault()。 -
样式绑定的响应性：动态class或style如果依赖响应式数据，要确保数据是响应式的（比如用data里的变量，或者计算属性），如果直接用普通对象，数据变化不会触发重新渲染。
-
插槽（Slot）的处理：Vue模板里的插槽用
<slot />很方便，但JSX里处理插槽得用this.$slots或者renderSlot方法，写法麻烦还容易出错，比如要渲染具名插槽，得这么写：render() { return ( <MyComponent> {() => this.$slots.header && this.$slots.header()} </MyComponent> ); }比模板里的
<template #header></template>麻烦多了，所以插槽多的场景，优先用模板更省心。 -
key的位置和唯一性：列表渲染时
key必须写，而且要保证唯一，JSX里key是作为属性写在组件标签上（<li key={item.id}>），别漏写或者重复。
实战案例：JSX咋解决Vue2复杂需求？
举两个真实开发中常见的例子，看JSX咋简化逻辑：
案例1：动态表单渲染
后台系统里，表单字段类型不固定（可能是输入框、下拉框、日期选择器），需要根据接口返回的配置渲染，用JSX可以这么写：
import Input from './Input.vue';
import Select from './Select.vue';
import DatePicker from './DatePicker.vue';
export default {
data() {
return {
fields: [
{ type: 'input', id: 'name', label: '姓名', props: { placeholder: '请输入姓名' } },
{ type: 'select', id: 'gender', label: '性别', options: ['男', '女'], props: {} },
{ type: 'date', id: 'birthday', label: '生日', props: { format: 'YYYY-MM-DD' } }
]
};
},
methods: {
handleChange(fieldId, value) {
// 处理值变化逻辑
}
},
render() {
return (
<div class="dynamic-form">
{this.fields.map(field => {
let Component;
if (field.type === 'input') Component = Input;
else if (field.type === 'select') Component = Select;
else if (field.type === 'date') Component = DatePicker;
return (
<Component
key={field.id}
field={field}
onInput={val => this.handleChange(field.id, val)}
{...field.props}
/>
);
})}
</div>
);
}
};
这里用JS的 if/else 动态选组件，还能批量传props，比模板里用 <component :is=""/> 写一堆 v-if 清爽太多。
案例2：多角色权限控制
系统有管理员、编辑、游客三种角色，页面结构完全不同，用JSX写分支逻辑：
import AdminLayout from './AdminLayout.vue';
import EditorLayout from './EditorLayout.vue';
import GuestView from './GuestView.vue';
export default {
data() {
return { role: 'admin' }; // 假设从接口拿到角色
},
render() {
const { role } = this;
if (role === 'admin') {
return (
<AdminLayout>
<div slot="sidebar">管理员侧边栏</div>
<div slot="main">管理员仪表盘</div>
</AdminLayout>
);
} else if (role === 'editor') {
return (
<EditorLayout>
<div slot="header">编辑头部</div>
<div slot="content">文章编辑器</div>
</EditorLayout>
);
}
return <GuestView message="请登录后操作" />;
}
};
模板里要写三层 v-if 嵌套，还得处理插槽，JSX用 if/else 结构清晰，维护时一眼能看懂分支逻辑。
Vue2升级Vue3后，JSX有啥变化？
虽然咱聊的是Vue2，但了解升级后的变化能更清楚Vue2 JSX的定位：
Vue3对JSX支持更“原生”，不需要额外Babel插件（Vue3自己内置了JSX解析），语法更接近React（比如事件绑定和React一样，而且组合式API和JSX结合更自然），但Vue2的JSX是基于“渲染函数+JSX语法糖”，和Vue3的JSX在编译原理、语法细节上有差异。
简单说，Vue2的JSX是“为了在Vue2里用JSX而做的适配”，Vue3则是“把JSX当成一等公民支持”，如果以后要升级项目，得注意JSX语法的迁移成本~
Vue2里的JSX不是银弹，但在复杂渲染、逻辑复用、团队协作这些场景下，能帮我们跳出模板语法的束缚，用更灵活的JS逻辑写页面，只要避开插槽处理、this指向这些坑，JSX能让Vue2开发效率飞升，要是你现在的Vue2项目遇到了模板搞不定的复杂需求，不妨试试JSX,说不定能打开新世界的大门～
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。