在Vue3中利用JSX+函数式组件做到更好的代码复用

在绝大多数情况下，Vue 推荐使用模板语法来创建应用。

先思考一下，你平时在 Vue 中是如何写模板代码的？

在业务场景下，我会优先选择 template 语法，因为更加直观和易读。template 中 html 代码一把梭，除非遇到可复用的组件或代码量比较大的组件，会选择封装成一个组件引入。

而对于 JSX 语法，只有在极少数 template 实在不好解决的情况下才会使用，其余 99% 的场景下都会使用 template 语法。

何时使用 JSX 语法

JSX 的本质是 createVNode，h()函数的内部执行的也是 createVNode 来生成虚拟 DOM 的，但是由于h()函数比较难写，所以我们使用 JSX 来更加方便快捷的书写。

之前我们提过在绝大多数（99%）情况下，Vue 推荐使用模板语法来创建应用。那么另外的 1% 使用 JSX 的情况都有哪些？

我们来看几个例子：

案例 1

一个巨典型的例子，通过 level prop 动态生成标题的组件时，你可能很快想到这样实现：

vue复制代码<template>
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
</template>
<script setup>
defineProps<
  level: number
>()
</script>

这里用 template 模板并不是最好的选择，在每一个级别的标题中重复书写了部分代码，不够简洁优雅。如果尝试用 JSX 来写，代码就会变得简单很多：

jsx复制代码const LevelHeading = () => {
  const tag = `h${this.level}`
  return <tag>{this.$slots.default}</tag>
}

案例 2 小组件

如果有这样一个场景：template 模板中包含很小并且重复的代码片段（不适合用 v-for 处理的代码），因为没有可复用性，并且代码量较少，抽出来单独封装一个组件反而代码量更大了，这种情况该如何处理呢 🧐？

React 中处理

如果你刚好有接触过 React 代码，那么你很快就能想到在 React 可以在一个函数式组件内声明对应的小组件，在函数式组件中可以这样写：