vue3中如何使用JSX

這篇文章主要介紹了vue3中如何使用JSX的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue3中如何使用JSX文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

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

在 Vue 3 的項(xiàng)目開(kāi)發(fā)中，template 是 Vue 3 默認(rèn)的寫(xiě)法。雖然 template 長(zhǎng)得很像 HTML，但 Vue 其實(shí)會(huì)把 template 解析為 render 函數(shù)，之后，組件運(yùn)行的時(shí)候通過(guò) render 函數(shù)去返回虛擬 DOM。

然而在某些使用場(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)
  }
}

手寫(xiě)的 h 函數(shù)，可以處理動(dòng)態(tài)性更高的場(chǎng)景。但是如果是復(fù)雜的場(chǎng)景，h 函數(shù)寫(xiě)起來(lái)就顯得非常繁瑣，需要自己把所有的屬性都轉(zhuǎn)變成對(duì)象。并且組件嵌套的時(shí)候，對(duì)象也會(huì)變得非常復(fù)雜。不過(guò)，因?yàn)?h 函數(shù)也是返回虛擬 DOM 的，所以有沒(méi)有更方便的方式去寫(xiě) 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 里面寫(xiě) 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')

那么，如何在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()
  ],
});

// 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ǔ)法書(shū)寫(xiě)，這樣 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è)重要原因。

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)表單生成器）。

關(guān)于“vue3中如何使用JSX”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue3中如何使用JSX”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。