vue中如何使用JSX？以下這篇文章為大家介紹vue3中使用JSX的方法，希望對大家有幫助！
在絕大多數情況下，Vue 建議使用範本<template>語法來建立應用程式。
在 Vue 3 的專案開發中，template 是 Vue 3 預設的寫法。雖然 template 看起來很像 HTML，但 Vue 其實會把 template 解析為 render 函數，之後，元件運行的時候透過 render 函數去回傳虛擬 DOM。 【學習影片分享：vue影片教學、web前端影片】
然而在某些使用場景下，我們真的需要用到JavaScript 完全的程式設計能力。這時渲染函數就派上用場了。
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 是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>
}
})我們該怎麼選擇 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沒有誰比誰更厲害的存在，在不同場景下各有優劣，用好了都是編程利器。
（完）
以上是一文詳解vue3中使用JSX的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
