render-functions

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Render Functions

渲染函数

When to Use

适用场景

Use this when you need complex dynamic rendering logic that's hard to express with template directives
This is helpful for component library development where flexibility and low-level control are needed

当你需要实现复杂的动态渲染逻辑，而模板指令难以表达时，使用渲染函数
这在组件库开发中很有帮助，因为这类场景需要灵活性和底层控制能力

When NOT to Use

不适用场景

When templates handle the use case — templates are more readable and benefit from compile-time optimizations
For standard component markup where
```
v-if
```
,
```
v-for
```
, and slots cover the rendering needs
When the team is unfamiliar with
```
h()
```
/ JSX and the maintenance cost outweighs the flexibility gain

当模板可以满足需求时——模板可读性更强，并且能受益于编译时优化
对于标准组件标记，
```
v-if
```
、
```
v-for
```
和插槽已经能满足渲染需求的情况
当团队不熟悉
```
h()
```
/JSX，维护成本超过灵活性带来的收益时

Instructions

使用指南

Use the
```
h()
```
function with three arguments: tag/component, props/attributes, and children
Use JSX with
```
@vue/babel-plugin-jsx
```
as a more readable alternative to raw
```
h()
```
calls
Prefer Vue templates for most application code — render functions are for advanced cases
Remember that Vue JSX uses
```
class
```
(not
```
className
```
) and single curly braces
```
{}
```

使用带有三个参数的
```
h()
```
函数：标签/组件、属性/特性、子节点
使用搭配
```
@vue/babel-plugin-jsx
```
的JSX作为原生
```
h()
```
调用的更易读替代方案
大多数应用代码优先选择Vue模板——渲染函数适用于高级场景
记住Vue JSX使用
```
class
```
（而非
```
className
```
），并且用单大括号
```
{}
```
嵌入变量

Details

详细说明

By using render functions, we skip the compile step that Vue takes to compile our templates, and are able to construct our component templates with the help of programmatic JavaScript.

通过使用渲染函数，我们跳过了Vue编译模板的步骤，能够借助程序化的JavaScript来构建组件模板。

But why?

为什么要使用？

Render functions come into play when we require a higher level of customization and flexibility that's not easily achievable with the standard template syntax. In a nutshell, you may prefer to use render functions:

When you need to dynamically render components or elements based on complex logic that can be cumbersome to express within a template.
You want to have a direct hand on the Virtual DOM for advanced manipulations.
You want to use JSX for building the template of your components.

Outside of these unique cases, Vue's template syntax should remain the go-to method for constructing component markup.

当我们需要更高程度的自定义和灵活性，而标准模板语法无法轻松实现时，渲染函数就派上用场了。简而言之，你可能更倾向于使用渲染函数的场景包括：

当你需要基于复杂逻辑动态渲染组件或元素，而这些逻辑在模板中表达起来很繁琐时
你想要直接操作虚拟DOM以进行高级处理时
你想要使用JSX来构建组件模板时

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

Render functions

渲染函数

Assume we had the following component that contains a

<div>

element encompassing a

<header>

element. The text content of the

<header>

element simply displays the value of a

message

prop.

html

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

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

We'll recreate the markup of the component step by step with the help of the render function — i.e. the

h()

function.

is short for hyperscript which is a term often used in virtual DOM implementations to denote JavaScript syntax that produces HTML. In simple terms, the

h()

function is the render function that allows us to create the "virtual" representation of the DOM nodes that Vue uses to track and subsequently render on the page.

The

h()

function takes three arguments of its own:

An HTML tag name or a component definition.
The props/attributes to be passed onto the element (event listeners, class attributes, etc.).
Child nodes of the parent node.

Here's the full render function equivalent:

html

<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>

We can now render the above component in the parent

App.vue

instance and pass a value of

"Hello World!"

to the

message

prop.

html

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

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

The component constructed with a render function produces the exact same output to its template equivalent.

假设我们有如下组件，它包含一个

<div>

元素，里面嵌套了一个

<header>

元素。

<header>

元素的文本内容显示

message

属性的值。

html

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

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

我们将借助渲染函数——即

h()

函数——逐步重建该组件的标记。

是hyperscript的缩写，这个术语常用于虚拟DOM实现中，指代生成HTML的JavaScript语法。简单来说，

h()

函数是一个渲染函数，允许我们创建Vue用来跟踪并最终渲染到页面上的DOM节点的“虚拟”表示。

h()

函数有三个参数：

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

以下是对应的完整渲染函数实现：

html

<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!"

。

html

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

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

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

JSX

JSX is a syntax extension that allows us to write HTML-like code within JavaScript. With Vue, JSX can be used as an alternative to the

h()

function to construct render functions.

Vue's JSX support isn't built in like in React. We need to use a specific Babel plugin —

@vue/babel-plugin-jsx

— to have our JSX code transformed into the appropriate

h()

function calls.

Here's the same render function component we've built before but now recreated with JSX:

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>

Since JSX is closer to JavaScript than to HTML, Vue JSX components use

class

instead of

className

and variables are embedded with single curly braces

{}

instead of double curly braces

{{ }}

JSX是一种语法扩展，允许我们在JavaScript中编写类HTML的代码。在Vue中，JSX可以作为

h()

函数的替代方案来构建渲染函数。

Vue的JSX支持不像React那样内置。我们需要使用特定的Babel插件——

@vue/babel-plugin-jsx

——来将JSX代码转换为相应的

h()

函数调用。

以下是我们之前用渲染函数构建的组件，现在改用JSX重建：

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

，并且用单大括号

{}

嵌入变量，而非双大括号

{{ }}

。

When to use render functions

何时使用渲染函数

If your component has complex, conditional rendering logic that is hard to express with template directives, render functions (with or without JSX) can provide a cleaner solution.
If you want more direct control over the virtual DOM.
In library/component-kit development where flexibility and low-level control are needed.

For most typical application development, Vue templates offer the right level of expressiveness and readability. Render functions and JSX are powerful tools to reach for when templates aren't enough.

如果你的组件有复杂的条件渲染逻辑，用模板指令难以清晰表达，渲染函数（带或不带JSX）可以提供更简洁的解决方案
如果你想要更直接地控制虚拟DOM
在库/组件套件开发中，这类场景需要灵活性和底层控制能力

对于大多数典型的应用开发，Vue模板提供了恰到好处的表达能力和可读性。当模板不足以满足需求时，渲染函数和JSX是强大的备选工具。

render-functions

Original

Translation

Render Functions

渲染函数

Table of Contents

目录

When to Use

适用场景

When NOT to Use

不适用场景

Instructions

使用指南

Details

详细说明

But why?

为什么要使用？

Render functions

渲染函数

JSX

JSX

When to use render functions

何时使用渲染函数

Source

来源

References

参考资料