In Vue, rendering functions are suitable for packaging components that require dynamic selection of labels, create transparent pass attributes, or optimize performance. 1. The rendering function uses JavaScript to return virtual DOM nodes to replace template syntax; 2. Use the h() function to create a VNode, accepting tag names, attribute objects and child nodes; 3. You can manually process slot content and dynamically switch components; 4. Applicable to UI library components, transition wrappers or portal components; 5. Note that performance is not always improved, and you need to use it reasonably to avoid excessive nesting, and pass $attrs and $listeners correctly.

In Vue, a render function gives you more control over how components are generated and rendered. This is especially useful when building advanced or dynamic components where using templates isn't flexible enough. You don't always need them, but when you do — like for higher-order components, dynamic tag selection, or performance-sensitive scenarios — render functions become a powerful tool.

Here's how to use them effectively in real-world Vue component development.

What Is a Render Function and When to Use It?

A render function in Vue is an alternative to writing template markup. Instead of using HTML-like syntax in the <template></template> block, you write JavaScript that returns a virtual DOM node (VNode). Vue uses this VNode tree to update the actual DOM efficiently.

You might reach for a render function when:

• You need to dynamically choose which tag or component to render
• You're creating wrapper components that pass down props/slots transparently
• You want to optimize rendering by avoiding unequal abstractions
• You're building reusable logic that manipulates children or slots programmatically

This is different from using h() in JSX or templates — here, you're working closer to the metal, with full access to Vue's rendering system.

How to Write a Basic Render Function

Vue provides the h function (short for hyperscript) to create virtual nodes. Here's a minimum example:

 import { h } from 'vue'

export default {
  render() {
    return h('div', 'Hello, render function!')
  }
}

The h function takes three main arguments:

• Type: HTML tag name ( 'div' ), component ( MyComponent ), or special Vue types like Fragment , Teleport
• Props: An object of attributes, props, listeners ( onClick , etc.)
• Children: A string, array of VNods, or nested h() calls

Example with props and children:

 render() {
  return h(
    'button',
    {
      class: 'btn primary',
      onClick: () => console.log('Clicked')
    },
    'Click me'
  )
}

It looks more verbose than a template at first, but it gives you fine-grained control, especially when things get dynamic.

Using Render Functions with Slots and Dynamic Components

One of the most common advanced uses is handling slots manually inside a render function. This is helpful when you need to wrap or modify slot content before rendering.

 render() {
  const defaultSlot = this.$slots.default ? this.$slots.default() : []
  return h('div', defaultSlot)
}

You can also dynamically switch between tags or components based on props:

 props: ['as'],
render() {
  const Tag = this.as // could be 'div', 'span', or a component
  return h(Tag, this.$attrs, this.$slots.default?.())
}

This pattern is used heavily in UI libraries where components need to be highly customized — think buttons that accept a tag prop to render as <a></a> , <button></button> , or even a router link.

Also, if you're writing something like a transition wrapper or portal component, render functions let you manipulate what gets rendered without relying on templates.

Performance Considerations and Best Practices

Render functions aren't inherently faster than templates — Vue compiles templates into optimized render functions under the hood. However, when you write your own render function, you can avoid some overhead or unnecessary checks.

Some tips:

• Only use render functions when needed; readability matters
• Use h consistently and keep structure clean
• Avoid deeply nested h() calls unless necessary
• Be careful with $attrs and $listeners — forward them properly
• If you're wrapping components, consider using defineProps and defineSlots in <script setup></script> for clarity

Also, note that not all features work exactly the same in render functions. For instance, v-model , directives, and scoped styles behave differently or require manual handling.

So yes, render functions in Vue are powerful, but they come with a trade-off in readability. Use them when you really need that extra control — especially in utility components, wrappers, or when building design system-level tools. Otherwise, stick with templates or the Composition API for simplicity.

That's pretty much it. Not hard once you get the hang of h() , but easy to overuse.

The above is the detailed content of How to use a render function in Vue for advanced components?. For more information, please follow other related articles on the PHP Chinese website!