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

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

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

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

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

h函數(shù)

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

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

在組件中如何使用呢？

之前當(dāng)組合式 API 與模板一起使用時(shí)，setup() 鉤子的返回值是用于暴露數(shù)據(jù)給模板。但是當(dāng)使用h()的時(shí)候，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ù)，可以處理動(dòng)態(tài)性更高的場(chǎng)景。但是如果是復(fù)雜的場(chǎng)景，h 函數(shù)寫起來(lái)就顯得非常繁瑣，需要自己把所有的屬性都轉(zhuǎn)變成對(duì)象。并且組件嵌套的時(shí)候，對(duì)象也會(huì)變得非常復(fù)雜。不過(guò)，因?yàn)?h 函數(shù)也是返回虛擬 DOM 的，所以有沒(méi)有更方便的方式去寫 h 函數(shù)呢？答案是肯定的，這個(gè)方式就是 JSX。

JSX

JSX 是 JavaScript 的一個(gè)類似 XML 的擴(kuò)展，有了它，我們可以用簡(jiǎn)單方式來(lái)創(chuàng)建vnodes：

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

這種在 JavaScript 里面寫 HTML 的語(yǔ)法，就叫做 JSX，算是對(duì) JavaScript 語(yǔ)法的一個(gè)擴(kuò)展。上面的代碼直接在 JavaScript 環(huán)境中運(yùn)行時(shí)，會(huì)報(bào)錯(cuò)。JSX 的本質(zhì)就是下面代碼的語(yǔ)法糖。

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

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

那么，如何在Vue項(xiàng)目中使用JSX呢？

默認(rèn)的情況下，vue3+vite的項(xiàng)目不支持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。

或者是一個(gè)jsx文件：

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

Template vs JSX

我們?cè)撛趺催x擇 JSX 和 template 呢？

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

參考：Vue渲染機(jī)制

JSX優(yōu)勢(shì)：template 則因?yàn)檎Z(yǔ)法限制原因，不能夠像 JSX 那樣可以支持更動(dòng)態(tài)的需求。這也是 JSX 相比于 template 的一個(gè)優(yōu)勢(shì)。

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

那如何選擇呢？

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

總結(jié)

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

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

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

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

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

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

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

（完）

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