Vue 3 Render Function Manual Rendering

The value of the render option is a function that accepts an h parameter (which can also be createElement) to create a VNode (Virtual Node). Within this function, you must use the h function to describe the structure and content of the component and return a VNode.

Below is an example demonstrating how to use the render option in Vue 3:

export default {
  name: 'MyComponent',
  render(h) {
    return h('div', { class: 'my-component' }, [
      h('h1', 'Hello, World!'),
      h('p', 'This is my custom component.')
    ]);
  }
}

In the code above, we define the render option within the component's options object. The value of the render option is a function that accepts an h parameter.

Inside the function body, we use the h function to create VNodes. In this example, we create a div element and add a class named 'my-component'. The child elements of the div include an h1 heading and a p paragraph.

Through the render option, we manually write the rendering logic for the component. This approach is particularly useful when dynamic generation of component content or more advanced manipulation of the component is required. Additionally, using the render option avoids the performance overhead associated with template compilation and provides more direct control capabilities.

It is important to note that VNodes within the render function can be nested, combined, and contain dynamic data. You can use JavaScript logic and expressions within the render function to generate different VNode trees.

Furthermore, Vue 3 provides several helper functions, such as createVNode, createTextVNode, and createCommentVNode, for creating various types of VNodes.