vue中如何使用JSX？下面本篇文章給大家介紹一下vue3中使用JSX的方法，希望對大家有所幫助！

前端（vue）入門到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用

在絕大多數(shù)情況下，Vue 推薦使用模板<template>語法來創(chuàng)建應(yīng)用。

在 Vue 3 的項目開發(fā)中，template 是 Vue 3 默認(rèn)的寫法。雖然 template 長得很像 HTML，但 Vue 其實會把 template 解析為 render 函數(shù)，之后，組件運行的時候通過 render 函數(shù)去返回虛擬 DOM。【學(xué)習(xí)視頻分享：vue視頻教程、web前端視頻】

然而在某些使用場景下，我們真的需要用到 JavaScript 完全的編程能力。這時渲染函數(shù)就派上用場了。

h函數(shù)

Vue 提供了一個 h() 函數(shù)用于創(chuàng)建 vnodes虛擬dom。如下示例：

import { h } from 'vue'  const vnode = h(   'div', // type   { id: 'foo', class: 'bar' }, // props   [     /* children */   ] )

在組件中如何使用呢？

之前當(dāng)組合式 API 與模板一起使用時，setup() 鉤子的返回值是用于暴露數(shù)據(jù)給模板。但是當(dāng)使用h()的時候，setup() 鉤子返回的是渲染函數(shù)：

import { ref, h } from 'vue'  export default {   props: {     /* ... */   },   setup(props) {     const count = ref(1)      // 返回渲染函數(shù)     return () => h('div', props.msg + count.value)   } }

手寫的 h 函數(shù)，可以處理動態(tài)性更高的場景。但是如果是復(fù)雜的場景，h 函數(shù)寫起來就顯得非常繁瑣，需要自己把所有的屬性都轉(zhuǎn)變成對象。并且組件嵌套的時候，對象也會變得非常復(fù)雜。不過，因為 h 函數(shù)也是返回虛擬 DOM 的，所以有沒有更方便的方式去寫 h 函數(shù)呢？答案是肯定的，這個方式就是 JSX。

JSX

JSX 是 JavaScript 的一個類似 XML 的擴展，有了它，我們可以用簡單方式來創(chuàng)建vnodes：

const vnode = <div id="app">hello</div>

這種在 JavaScript 里面寫 HTML 的語法，就叫做 JSX，算是對 JavaScript 語法的一個擴展。上面的代碼直接在 JavaScript 環(huán)境中運行時，會報錯。JSX 的本質(zhì)就是下面代碼的語法糖。

const vnode = createVnode('div',{id:"app"}, 'hello')

其實h 函數(shù)內(nèi)部也是調(diào)用 createVnode 來返回虛擬 DOM。

那么，如何在Vue項目中使用JSX呢？

默認(rèn)的情況下，vue3+vite的項目不支持jsx，如果想支持jsx，需要安裝插件@vitejs/plugin-vue-jsx

安裝

npm i @vitejs/plugin-vue-jsx -D

在vite.config.js中進(jìn)行配置：

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中l(wèi)ang要改成jsx。

或者是一個jsx文件：

// render.jsx import { defineComponent } from 'vue'  export default defineComponent({   setup() {     return () => <div>jsx文件</div>   } })

Template vs JSX

我們該怎么選擇 JSX 和 template 呢？

template優(yōu)勢：template 的語法是固定的，只有 v-if、v-for 等等語法。我們按照這種固定格式的語法書寫，這樣 Vue3 在編譯層面就可以很方便地去做靜態(tài)標(biāo)記的優(yōu)化，減少Diff過程。比如靜態(tài)提升，類型標(biāo)記，樹結(jié)構(gòu)打平等來提高虛擬 DOM 運行時性能。這也是 Vue 3 的虛擬 DOM 能夠比 Vue 2 快的一個重要原因。

參考：Vue渲染機制

JSX優(yōu)勢：template 則因為語法限制原因，不能夠像 JSX 那樣可以支持更動態(tài)的需求。這也是 JSX 相比于 template 的一個優(yōu)勢。

JSX 相比于 template 還有一個優(yōu)勢，是可以在一個文件內(nèi)返回多個組件。

那如何選擇呢？

在實現(xiàn)業(yè)務(wù)需求的時候，優(yōu)先使用 template，盡可能地利用 Vue 本身的性能優(yōu)化。而對于動態(tài)性要求較高的組件可以使用 JSX 來實現(xiàn)。（比如后面，我會用JSX來實現(xiàn)動態(tài)表單生成器）

總結(jié)

首先，我們在項目中通常使用template模板來創(chuàng)建應(yīng)用，template模板會在構(gòu)建階段被編譯成render渲染函數(shù)。渲染函數(shù)就是用來返回虛擬DOM的函數(shù)。

那么我們其實可以跳過這個步驟，直接使用h函數(shù)來生成虛擬DOM。

h函數(shù)的內(nèi)部執(zhí)行的其實是createVNode函數(shù)來生成虛擬DOM的，但是由于h函數(shù)比較難寫，所以我們使用JSX來更加方便快捷的書寫。JSX的內(nèi)部其實也是使用的createVNode函數(shù)。

JSX在JavaScript中是不能直接執(zhí)行的，在vite項目中，我們需要安裝插件@vitejs/plugin-vue-jsx

，并進(jìn)行相應(yīng)配置才可以。

最后對比了template和JSX的優(yōu)劣勢。template的優(yōu)勢在于語法固定，容易書寫，并且在編譯層面Vue3對template的編譯做了很多優(yōu)化。而JSX勝在靈活性，在某些動態(tài)性要求較高的情況下，JSX成了標(biāo)配。

所謂，術(shù)業(yè)有專攻，template和JSX沒有誰比誰更厲害的存在，在不同場景下各有優(yōu)劣，用好了都是編程利器。

（完）

（學(xué)習(xí)視頻分享：web前端開發(fā)、編程基礎(chǔ)視頻）