render-functions

渲染函数

目录

• 适用场景
• 不适用场景
• 说明
• 详情
• 源代码

Vue 建议我们使用模板（即 <template></template> 语法）来构建 Vue 组件的标记。不过，我们也可以直接使用一种称为渲染函数的方式来构建组件标记。

在构建时，Vue 会将我们为组件编写的模板编译为渲染函数。Vue 正是通过这些编译后的渲染函数，构建组成虚拟 DOM 的节点的虚拟表示。

适用场景

• 当你需要复杂的动态渲染逻辑，且难以用模板指令表达时，使用渲染函数
• 在需要灵活性和底层控制的组件库开发中，渲染函数很有帮助

不适用场景

• 当模板能够满足使用场景时——模板更易读，也能受益于编译时优化
• 对于标准组件标记，如果 v-if、v-for 和插槽已能满足渲染需求
• 当团队不熟悉 h() / JSX，且维护成本高于灵活性带来的收益时

说明

• 使用 h() 函数，并传入三个参数：标签/组件、属性/特性和子节点
• 使用 @vue/babel-plugin-jsx 提供的 JSX，作为比直接调用 h() 更易读的替代方式
• 大多数应用代码优先使用 Vue 模板——渲染函数适用于高级场景
• 请记住，Vue JSX 使用 class（而不是 className）和单大括号 {}

详情

使用渲染函数，我们可以跳过 Vue 编译模板的步骤，并借助程序化 JavaScript 构建组件模板。

但为什么？

当我们需要更高程度的自定义和灵活性，而标准模板语法又难以实现时，就可以使用渲染函数。简而言之，在以下情况下，你可能更倾向于使用渲染函数：

• 当你需要根据复杂逻辑动态渲染组件或元素，而这些逻辑难以在模板中表达时。
• 当你希望直接操作虚拟 DOM 以进行高级处理时。
• 当你想使用 JSX 构建组件模板时。

除这些特殊情况外，Vue 的模板语法仍应是构建组件标记的首选方式。

渲染函数

假设我们有以下组件，其中一个 <div> 元素包含一个 <header> 元素。<header> 元素的文本内容会显示 message 属性的值。

<template>
  <div class="render-card">
    <header class="card-header card-header-title">{{ message }}</header>
  </div>
</template>

<script setup>
  const { message } = defineProps(["message"]);
</script>

我们将借助渲染函数（即 h() 函数），逐步重建该组件的标记。

h 是 hyperscript 的缩写，这个术语常用于虚拟 DOM 实现中，表示能够生成 HTML 的 JavaScript 语法。简单来说，h() 函数就是渲染函数，它能让我们创建 Vue 用来跟踪并随后在页面上渲染的 DOM 节点的“虚拟”表示。

h() 函数有三个参数：

1. HTML 标签名称或组件定义。
2. 要传递给元素的属性/特性（事件监听器、class 属性等）。
3. 父节点的子节点。

下面是完整的等效渲染函数：

<template>
  <render />
</template>

<script setup>
  import { h } from "vue";

  const { message } = defineProps(["message"]);

  const render = () => {
    return h(
      "div",
      {
        class: "render-card",
      },
      [
        h(
          "header",
          {
            class: "card-header card-header-title",
          },
          message
        ),
      ]
    );
  };
</script>

现在，我们可以在父级 App.vue 实例中渲染上述组件，并向 message 属性传入 "Hello World!"。

<template>
  <RenderComponent message="Hello world!" />
</template>

<script setup>
  import RenderComponent from "./components/RenderComponent.vue";
</script>

使用渲染函数构建的组件，其输出与对应的模板完全相同。

JSX

JSX 是一种语法扩展，允许我们在 JavaScript 中编写类似 HTML 的代码。在 Vue 中，JSX 可以作为 h() 函数的替代方案，用于构造渲染函数。

Vue 对 JSX 的支持不像 React 那样内置。我们需要使用特定的 Babel 插件——@vue/babel-plugin-jsx——将 JSX 代码转换为相应的 h() 函数调用。

下面是我们之前构建的同一个渲染函数组件，现在用 JSX 重新编写：

<script setup>
  const { message } = defineProps(["message"]);

  const render = () => {
    return (
      <div class="render-card">
        <header class="card-header card-header-title">{message}</header>
      </div>
    );
  };
</script>

由于 JSX 更接近 JavaScript 而非 HTML，Vue JSX 组件使用 class 而不是 className，并且变量用一对花括号 {} 而不是双花括号 {{ }} 嵌入。

何时使用渲染函数

• 如果组件包含复杂的条件渲染逻辑，难以用模板指令表达，渲染函数（无论是否搭配 JSX）可以提供更简洁的解决方案。
• 如果你想更直接地控制虚拟 DOM。
• 在开发库或组件套件时，需要灵活性和底层控制能力。

对于大多数常见的应用开发，Vue 模板能提供恰当的表达能力和可读性。当模板无法满足需求时，渲染函数和 JSX 是值得使用的强大工具。

来源

• patterns.dev/vue/render-functions

参考资料

• 渲染函数与 JSX | Vue 文档
• @vue/babel-plugin-jsx | GitHub