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

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

在絕大多數情況下，Vue 推薦使用模板<template>語法來建立應用。

在 Vue 3 的專案開發中，template 是 Vue 3 預設的寫法。雖然 template 長得很像 HTML，但 Vue 其實會把 template 解析為 render 函數，之後，元件執行的時候通過 render 函數去返回虛擬 DOM。【學習視訊分享：、】

然而在某些使用場景下，我們真的需要用到 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 快的一個重要原因。

參考：

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的方法的詳細內容，更多請關注TW511.COM其它相關文章！