vue3中如何使用JSX

這篇文章主要介紹了vue3中如何使用JSX的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue3中如何使用JSX文章都會有所收獲，下面我們一起來看看吧。

在絕大多數情況下，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')

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

// 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來實現動態表單生成器）。

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