vue提供了template模板语法，已经能应对开发中几乎所有场景。不过JSX语法确有更灵活的优点，某些场景下使用JSX能大大减小代码复杂性，以及增加代码灵活性和拓展性。
比如有这样一个需求：需要通过一个值的范围在数字 1 到 6 之间的变量，去渲染标题组件 h1~h6，并根据传递的 props 去渲染标签名。对于这个需求，按照 template 语法，会写很多的 v-if：
<h1 v-if="num==1">{{title}}</h1>
<h2 v-if="num==2">{{title}}</h2>
<h3 v-if="num==3">{{title}}</h3>
<h4 v-if="num==4">{{title}}</h4>
<h5 v-if="num==5">{{title}}</h5>
<h6 v-if="num==6">{{title}}</h6>
了解一下 JSX 是什么，JSX 来源自 React 框架，下面这段代码就是 JSX 的语法，给变量 title 赋值了一个 h1 标签const element = <h1 id="app">Hello, World!</h1>
这种在 JavaScript 里面写 HTML 的语法，就叫做 JSX，算是对 JavaScript 语法的一个扩展。上面的代码直接在 JavaScript 环境中运行时，会报错。JSX 的本质就是下面代码的语法糖，h 函数内部也是调用 createVnode 来返回虚拟 DOM。对于那些创建虚拟 DOM 的函数，统一称为 h 函数。
在从 JSX 到 createVNode 函数的转化过程中，需要安装一个 JSX 插件。在项目的根目录下，打开命令行，执行此命令可安装插件：
npm install @vitejs/plugin-vue-jsx -D
插件安装完成后，进入根目录下，打开 vite.config.js 文件去修改 vite 配置。在 vite.config.js 文件中，加入下面的代码。这样，在加载 JSX 插件后 ，现在的页面中就可以支持 JSX 插件了。
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
plugins: [vue(),vueJsx()]
})
然后就可以使用该JSX组件了
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup(props) {
let title = ref('')
let todos = ref([{ title: "学习 Vue 3", done: true },{ title: "睡觉", done: false }]);
function addTodo(){
todos.value.push({
title:title.value
})
title.value = ''
}
return () => <div>
<input type="text" vModel={title.value} />
<button onClick={addTodo}>click</button>
<ul>
{
todos.value.length ? todos.value.map(todo=>{
return <li>{todo.title}</li>
}): <li>no data</li>
}
</ul>
</div>
}
})
