请解释 JSX 的概念，并说明在 Vue 项目中如何引入和使用 JSX 来编写组件模板。
考察说明
考查对 JSX 语法本质的理解以及其在 Vue 中的具体应用能力。
回答思路
- 【回答框架 1】JSX 是 JavaScript 的语法扩展，允许在 JavaScript 代码中直接编写类似 HTML 的结构，最终会被编译为 React.createElement 或 Vue 的 h 函数调用，本质是创建虚拟 DOM 节点的语法糖。
- 【回答框架 2】Vue 中使用 JSX 需要借助 Babel 插件，通过 Vite 或 vue-cli 配置，将 JSX 语法转换为渲染函数。Vue 3 中主要使用 h 函数，例如 const vnode = <div>Hello</div> 会被编译为 h('div', 'Hello')。
- 【回答框架 3】在 Vue 组件中，可以在 render 函数或 setup 函数中返回 JSX，实现更灵活的模板逻辑，适合动态组件、高阶组件或需要复杂条件渲染的场景。
- 【回答框架 4】JSX 与 Vue 模板语法的主要差异在于：JSX 使用 JavaScript 表达式（如 {condition ? <A/> : <B/>}），而模板使用 v-if/v-for 指令；JSX 中绑定事件使用 onClick，模板中使用 @click；JSX 更接近 JavaScript 原生语法，模板则更声明式。
- 【回答框架 5】使用 JSX 时需注意：Vue 的指令（如 v-show）不能直接使用，需通过条件表达式替代；样式绑定 class 需要转换为对象或数组形式；组件引用需直接使用组件实例而非字符串注册名。
- 【关键点 1】JSX 是 JavaScript 语法的扩展，编译为 h 函数调用，生成虚拟 DOM。
- 【关键点 2】Vue 通过 Babel 插件支持 JSX，Vue 3 推荐在 render 或 setup 中使用。
- 【关键点 3】JSX 与模板语法在条件、循环和事件绑定上写法不同。
- 【关键点 4】在 Vue 中使用 JSX 适合复杂逻辑场景，但模板语法仍适用于多数场景。
- 【易错点 1】混淆 JSX 与 Vue 指令，试图在 JSX 中使用 v-if/v-for 导致错误。
- 【易错点 2】忘记 JSX 表达式需用花括号包裹，导致语法错误。
- 【易错点 3】在 JSX 中直接使用字符串组件名而非组件实例，导致渲染失败。