Un article expliquant en détail comment utiliser JSX dans vue3

Comment utiliser JSX dans

vue ? L'article suivant vous présentera comment utiliser JSX dans vue3. J'espère qu'il vous sera utile !

Dans la plupart des cas, Vue recommande d'utiliser la syntaxe du modèle <template> pour créer des applications. <template>语法来创建应用。

在 Vue 3 的项目开发中，template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML，但 Vue 其实会把 template 解析为 render 函数，之后，组件运行的时候通过 render 函数去返回虚拟 DOM。【学习视频分享：vue视频教程、web前端视频】

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

参考：Vue渲染机制

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

Dans le développement d'un projet Vue 3, le modèle est la méthode d'écriture par défaut de Vue 3. Bien que le modèle ressemble beaucoup à HTML, Vue analyse en fait le modèle dans une fonction de rendu. Ensuite, lorsque le composant est en cours d'exécution, la fonction de rendu renvoie le DOM virtuel. [Partage de vidéos d'apprentissage : vue vidéo tutoriel

, web front-end video

]🎜🎜Cependant, dans certains scénarios d'utilisation, nous nécessite vraiment des compétences complètes en programmation en JavaScript. C'est là que la fonction de rendu est utile. 🎜

Fonction h

🎜Vue fournit une fonction h() pour créer un domaine virtuel vnodes. L'exemple suivant : Comment utiliser 🎜rrreee🎜 dans les composants ? 🎜🎜Auparavant, lorsque l'API de composition était utilisée avec des modèles, la valeur de retour du hook setup() était utilisée pour exposer les données au modèle. Mais lors de l'utilisation de h(), le hook setup() renvoie la fonction de rendu : 🎜rrreee🎜Fonction h manuscrite, qui peut être traitée. Plus scènes dynamiques. Mais s'il s'agit d'une scène complexe, la fonction h est très lourde à écrire et vous devez convertir vous-même tous les attributs en objets. Et lorsque les composants sont imbriqués, les objets deviennent très complexes. Cependant, étant donné que la fonction h renvoie également un DOM virtuel, existe-t-il un moyen plus pratique d'écrire la fonction h ? La réponse est oui, la solution est JSX. 🎜

JSX

🎜JSX est une extension de type XML de JavaScript Avec elle, nous pouvons créer des vnodes d'une manière simple : 🎜 rrreee. 🎜Cette syntaxe pour écrire du HTML en JavaScript s'appelle JSX, qui est une extension de la syntaxe JavaScript. Lorsque le code ci-dessus est exécuté directement dans l'environnement JavaScript, une erreur sera signalée. L'essence de JSX est le sucre syntaxique pour le code suivant. 🎜rrreee🎜En fait, createVnode est également appelé dans la fonction h pour renvoyer le DOM virtuel. 🎜🎜Alors, comment utiliser JSX dans le projet Vue ? 🎜🎜Par défaut, les projets vue3+vite ne supportent pas jsx. Si vous souhaitez supporter jsx, vous devez installer le plug-in @vitejs/plugin-vue-jsx🎜🎜Installer 🎜rrreee🎜. dans vite.config. Configurez en js : 🎜rrreee🎜 Ensuite, vous pouvez l'utiliser dans le composant Vue : 🎜rrreee

🎜Remarque : la langue du script doit être modifiée en jsx. 🎜

🎜Ou un fichier jsx : 🎜rrreee

Modèle vs JSX

🎜Comment devrions-nous choisir JSX et le modèle ? 🎜🎜Avantages du modèle : la syntaxe du modèle est fixe, uniquement la syntaxe v-if, v-for, etc. Nous écrivons selon cette syntaxe de format fixe, afin que Vue3 puisse facilement optimiser les balises statiques au niveau de la compilation et réduire le processus Diff. Par exemple, la promotion statique, les balises de type, l'équilibrage de la structure arborescente, etc. peuvent améliorer les performances d'exécution du DOM virtuel. C'est également une raison importante pour laquelle le DOM virtuel de Vue 3 est plus rapide que Vue 2. 🎜

🎜Référence : Mécanisme de rendu Vue🎜🎜

🎜Avantage JSX : le modèle ne peut pas prendre en charge des besoins plus dynamiques comme JSX en raison de restrictions de syntaxe. C'est aussi un avantage de JSX par rapport aux modèles. 🎜🎜JSX présente un autre avantage par rapport au modèle dans la mesure où il peut renvoyer plusieurs composants dans un seul fichier. 🎜🎜Alors comment choisir ? 🎜🎜Lorsque vous réalisez les besoins de votre entreprise, donnez la priorité à l'utilisation de modèles et utilisez autant que possible la propre optimisation des performances de Vue. Les composants ayant des exigences dynamiques plus élevées peuvent être implémentés à l'aide de JSX. (Par exemple, plus tard, j'utiliserai JSX pour implémenter le générateur de formulaires dynamiques) 🎜

Résumé

🎜Tout d'abord, nous utilisons habituellement modèle dans nos projets Pour créer une application, le modèle modèle sera compilé dans la fonction de rendu pendant la phase de construction. La fonction de rendu est une fonction utilisée pour renvoyer le DOM virtuel. 🎜🎜Ensuite, nous pouvons ignorer cette étape et utiliser directement la fonction h pour générer un DOM virtuel. 🎜🎜L'exécution interne de la fonction h est en fait la fonction createVNode pour générer du DOM virtuel. Cependant, comme la fonction h est difficile à écrire, nous utilisons JSX pour l'écrire plus facilement et plus rapidement. La fonction createVNode est en fait utilisée en interne dans JSX. 🎜🎜JSX ne peut pas être exécuté directement en JavaScript. Dans le projet vite, nous devons installer le plug-in @vitejs/plugin-vue-jsx🎜🎜 et le configurer en conséquence. 🎜

Enfin, nous avons comparé les avantages et les inconvénients du template et du JSX. L'avantage du template est que sa syntaxe est fixe et facile à écrire. Au niveau de la compilation, Vue3 a fait de nombreuses optimisations pour la compilation des templates. L'avantage de JSX est la flexibilité. Dans certains cas avec des exigences dynamiques élevées, JSX est devenu la configuration standard.

Comme le dit le proverbe, il existe des spécialités dans l'industrie de l'art. Aucune n'est meilleure que l'autre en matière de modèles et de JSX. Elles ont chacune leurs propres avantages et inconvénients dans différents scénarios. Ce sont tous deux des outils de programmation puissants lorsqu'ils sont utilisés correctement.

(Fin)

(Partage de vidéos d'apprentissage : Développement web front-end, Vidéo de programmation de base)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!