vue 2 中 jsx 可提升 render 函数可读性与维护性，需配置 babel 插件并改用 .jsx 后缀；条件、列表、事件等均用 js 表达式实现，props、插槽语义不变，v-model 和 .sync 需手动展开。
Vue 2 中用 render 函数写复杂界面，直接写 createElement（即 h）容易嵌套深、可读差；引入 JSX 后，能用接近模板的语法，同时保留 JavaScript 全部逻辑能力——关键不是“能不能写”，而是怎么组织才清晰、可维护、不踩坑。
JSX 环境必须配对：Babel 插件 + 文件后缀
Vue 2 默认不识别 JSX，需手动接入支持：
- 安装插件：
npm install babel-plugin-transform-vue-jsx -D - 在
babel.config.js或.babelrc中声明：{"plugins": ["transform-vue-jsx"]} - 组件文件后缀改为
.jsx（推荐），或保留.vue但<script lang="jsx"></script>（部分构建工具需额外配置）
JSX 中处理动态结构：条件、列表、事件全靠 JS 表达式
没有 v-if、v-for 指令，全部转为原生 JS 逻辑：
- 条件渲染用三元或逻辑与：
{this.loading ? <spinner></spinner> : <list items="{this.items}/">}</list> - 列表渲染用
map，注意加key：{this.items.map(item => <li key="{item.id}">{item.name}</li>)} - 事件绑定用
onXXX属性：<button onclick="{this.handleSubmit}">提交</button>（不是@click） - 原生属性如
innerHTML、autofocus可直接写：<div dompropsinnerhtml="{this.html}"></div>
组件通信和插槽：props、slots、scopedSlots 保持 Vue 语义
JSX 不改变 Vue 的数据流机制，只是写法变化：
- 传 props：
<myinput value="{this.inputValue}" oninput="{this.onInput}/"></myinput> - 默认插槽：
<modal>{this.$slots.default}</modal> - 具名插槽：
<modal>{{ title: () => <h3>标题</h3> }}</modal> - 作用域插槽（如
table-row）：{this.$scopedSlots.row({ row: this.currentRow })}
v-model 和 .sync 的等价写法要手动展开
JSX 不支持语法糖，必须显式拆解：
-
v-model相当于:value+@input：<input value="{this.text}" oninput="{e"> this.text = e.target.value}/> -
:title.sync相当于:title+@update:title：<child title="{this.title}" onupdatetitle="{val"> this.title = val}/></child>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
