Render Functions & JSX | Vue.js

Creating an Application
Reactivity Fundamentals
Class and Style Bindings
Conditional Rendering
Fallthrough Attributes
Single-File Components
Server-Side Rendering (SSR)
Production Deployment
TS with Composition API
Render Functions & JSX
Vue and Web Components
Animation Techniques
Vue recommends using templates to build applications in the vast majority of cases. However, there are situations where we need the full programmatic power of JavaScript. That's where we can use the render function.
If you are new to the concept of virtual DOM and render functions, make sure to read the Rendering Mechanism chapter first.
Vue provides an h() function for creating vnodes:
h() is short for hyperscript - which means "JavaScript that produces HTML (hypertext markup language)". This name is inherited from conventions shared by many virtual DOM implementations. A more descriptive name could be createVNode(), but a shorter name helps when you have to call this function many times in a render function.
The h() function is designed to be very flexible:
The resulting vnode has the following shape:
The full VNode interface contains many other internal properties, but it is strongly recommended to avoid relying on any properties other than the ones listed here. This avoids unintended breakage in case the internal properties are changed.
When using templates with Composition API, the return value of the setup() hook is used to expose data to the template. When using render functions, however, we can directly return the render function instead:
The render function is declared inside setup() so it naturally has access to the props and any reactive state declared in the same scope.
In addition to returning a single vnode, you can also return strings or arrays:
Make sure to return a function instead of directly returning values! The setup() function is called only once per component, while the returned render function will be called multiple times.
We can declare render functions using the render option:
The render() function has access to the component instance via this.
In addition to returning a single vnode, you can also return strings or arrays:
If a render function component doesn't need any instance state, they can also be declared directly as a function for brevity:
That's right, this is a valid Vue component! See Functional Components for more details on this syntax.
All vnodes in the component tree must be unique. That means the following render function is invalid:
If you really want to duplicate the same element/component many times, you can do so with a factory function. For example, the following render function is a perfectly valid way of rendering 20 identical paragraphs:
A vnode object has been declared in setup(), you can use it like a normal component for rendering.
A vnode represents an already created render output, not a component definition. Using a vnode in <template> does not create a new component instance, and the vnode will be rendered as-is.
This pattern should be used with care and is not a replacement for normal components.
JSX is an XML-like extension to JavaScript that allows us to write code like this:
Inside JSX expressions, use curly braces to embed dynamic values:
create-vue and Vue CLI both have options for scaffolding projects with pre-configured JSX support. If you are configuring JSX manually, please refer to the documentation of @vue/babel-plugin-jsx for details.
Although first introduced by React, JSX actually has no defined runtime semantics and can be compiled into various different outputs. If you have worked with JSX before, do note that Vue JSX transform is different from React's JSX transform, so you can't use React's JSX transform in Vue applications. Some notable differences from React JSX include:
Vue's type definition also provides type inference for TSX usage. When using TSX, make sure to specify "jsx": "preserve" in tsconfig.json so that TypeScript leaves the JSX syntax intact for Vue JSX transform to process.
Similar to the transform, Vue's JSX also needs different type definitions.
Starting in Vue 3.4, Vue no longer implicitly registers the global JSX namespace. To instruct TypeScript to use Vue's JSX type definitions, make sure to include the following in your tsconfig.json: