一文詳解vue3中使用JSX的方法

vue中如何使用JSX？以下這篇文章為大家介紹vue3中使用JSX的方法，希望對大家有幫助！

在絕大多數情況下，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前端開發、程式設計基礎影片）

以上是一文詳解vue3中使用JSX的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！