配置在vue3中使用jsx非常方便，只需要安装官方@vitejs/plugin-vue-jsx插件，在vite.config.ts中配置//请。config.tsimportvueJsxfrom"@vitejs/plugin-vue-jsx";exportdefault{plugins:[vueJsx()]}配置vite.config.ts后，虽然可以使用jsx，页面也能正常渲染，但还是会提示无法使用jsx。这时候需要在tsconfig.ts中配置"jsx":"preserve"属性，就可以愉快的用jsx形式写vue了。//tsconfig.ts{"jsx":"preserve",}模板语法使用jsx时，setup需要返回一个函数，函数返回jsx形式。但是，使用jsx格式也有缺点。使用数据很烦人。不能像模板中那样直接使用。您需要添加.value。虽然新的volar插件会自动加.value，但还是不舒服。一不小心就会忘记写。v-if/v-show另一个不方便的地方是不能用v-if，在jsx中必须用三元表达式，但是三元的感觉看起来不是很舒服}return()=>{return(
{msg.value}
{isShow.value&&{isShow.value?"show":"hide"}
}<div>{msg.value}
{isShow.value&&{isShow.value?“显示”：“隐藏”
}