站長資訊網vue中如何使用JSX？下面本篇文章給大家介紹一下vue3中使用JSX的方法，希望對大家有所幫助！
前端（vue）入門到精通課程，老師在線輔導：聯系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具：點擊使用
在絕大多數情況下，Vue 推薦使用模板<template>語法來創建應用。
在 Vue 3 的項目開發中，template 是 Vue 3 默認的寫法。雖然 template 長得很像 HTML，但 Vue 其實會把 template 解析為 render 函數，之后，組件運行的時候通過 render 函數去返回虛擬 DOM。【學習視頻分享：vue視頻教程、web前端視頻】
然而在某些使用場景下，我們真的需要用到 JavaScript 完全的編程能力。這時渲染函數就派上用場了。
h函數
Vue 提供了一個 h() 函數用于創建 vnodes虛擬dom。如下示例：
import { h } from 'vue' const vnode = h( 'div', // type { id: 'foo', class: 'bar' }, // props [ /* children */ ] )
在組件中如何使用呢？
之前當組合式 API 與模板一起使用時，setup() 鉤子的返回值是用于暴露數據給模板。但是當使用h()的時候，setup() 鉤子返回的是渲染函數：
import { ref, h } from 'vue' export default { props: { /* ... */ }, setup(props) { const count = ref(1) // 返回渲染函數 return () => h('div', props.msg + count.value) } }
手寫的 h 函數，可以處理動態性更高的場景。但是如果是復雜的場景，h 函數寫起來就顯得非常繁瑣，需要自己把所有的屬性都轉變成對象。并且組件嵌套的時候，對象也會變得非常復雜。不過，因為 h 函數也是返回虛擬 DOM 的，所以有沒有更方便的方式去寫 h 函數呢？答案是肯定的，這個方式就是 JSX。
JSX
JSX 是 JavaScript 的一個類似 XML 的擴展，有了它，我們可以用簡單方式來創建vnodes：
const vnode = <div id="app">hello</div>
這種在 JavaScript 里面寫 HTML 的語法，就叫做 JSX，算是對 JavaScript 語法的一個擴展。上面的代碼直接在 JavaScript 環境中運行時，會報錯。JSX 的本質就是下面代碼的語法糖。
const vnode = createVnode('div',{id:"app"}, 'hello')
其實h 函數內部也是調用 createVnode 來返回虛擬 DOM。
那么，如何在Vue項目中使用JSX呢？
默認的情況下，vue3+vite的項目不支持jsx，如果想支持jsx，需要安裝插件@vitejs/plugin-vue-jsx
安裝
npm i @vitejs/plugin-vue-jsx -D
在vite.config.js中進行配置：
import vueJsx from "@vitejs/plugin-vue-jsx"; // 配置vue使用jsx export default defineConfig({ plugins: [ vue(), vueJsx() ], });
然后就可以在Vue組件中使用了：
// render.vue <script> import { ref } from "vue"; export default { setup() { const count = ref(100); return () => <div>count is: {count.value}</div>; }, }; </script>
注意：script中lang要改成jsx。
或者是一個jsx文件：
// render.jsx import { defineComponent } from 'vue' export default defineComponent({ setup() { return () => <div>jsx文件</div> } })
Template vs JSX
我們該怎么選擇 JSX 和 template 呢？
template優勢：template 的語法是固定的，只有 v-if、v-for 等等語法。我們按照這種固定格式的語法書寫，這樣 Vue3 在編譯層面就可以很方便地去做靜態標記的優化，減少Diff過程。比如靜態提升，類型標記，樹結構打平等來提高虛擬 DOM 運行時性能。這也是 Vue 3 的虛擬 DOM 能夠比 Vue 2 快的一個重要原因。
參考：Vue渲染機制
JSX優勢：template 則因為語法限制原因，不能夠像 JSX 那樣可以支持更動態的需求。這也是 JSX 相比于 template 的一個優勢。
JSX 相比于 template 還有一個優勢，是可以在一個文件內返回多個組件。
那如何選擇呢？
在實現業務需求的時候，優先使用 template，盡可能地利用 Vue 本身的性能優化。而對于動態性要求較高的組件可以使用 JSX 來實現。（比如后面，我會用JSX來實現動態表單生成器）
總結
首先，我們在項目中通常使用template模板來創建應用，template模板會在構建階段被編譯成render渲染函數。渲染函數就是用來返回虛擬DOM的函數。
那么我們其實可以跳過這個步驟，直接使用h函數來生成虛擬DOM。
h函數的內部執行的其實是createVNode函數來生成虛擬DOM的，但是由于h函數比較難寫，所以我們使用JSX來更加方便快捷的書寫。JSX的內部其實也是使用的createVNode函數。
JSX在JavaScript中是不能直接執行的，在vite項目中，我們需要安裝插件@vitejs/plugin-vue-jsx
，并進行相應配置才可以。
最后對比了template和JSX的優劣勢。template的優勢在于語法固定，容易書寫，并且在編譯層面Vue3對template的編譯做了很多優化。而JSX勝在靈活性，在某些動態性要求較高的情況下，JSX成了標配。
所謂，術業有專攻，template和JSX沒有誰比誰更厲害的存在，在不同場景下各有優劣，用好了都是編程利器。
（完）
（學習視頻分享：web前端開發、編程基礎視頻）
