Exploring JSX in Vue 3: Concepts, Usage Scenarios, and Performance

Lin Chengzhang, a frontend engineer at ByteDance's Dali Intelligence team and maintainer of the Vue 3 Babel JSX plugin, delivered a talk titled "Exploring JSX in Vue 3" at Vue Conf 21. The presentation reviews the motivation, implementation, and practical aspects of using JSX within Vue.

Introduction

Lin introduces himself and explains that he has been maintaining the Vue 3 Babel JSX plugin, originally created to help Ant Design Vue and Vant migrate to Vue 3, both of which heavily use JSX.

Basic Concepts

In Vue, a .vue Single‑File Component (SFC) consists of <template> , <script> , and <style> blocks, which compile to a render function and Virtual DOM. JSX, on the other hand, is pure JavaScript syntax that can express UI directly.

Why Vue Supports JSX

Vue’s official recommendation is the template syntax, which is compiled to a render function. However, some developers prefer the JavaScript‑centric approach of JSX, especially those coming from React or backend backgrounds, because it offers full programming flexibility and can reduce the need for multiple files.

What "Real" JSX Is

JSX originated from Facebook as a JavaScript syntax extension. It must be transformed by Babel (or a similar tool) before browsers can execute it. After compilation, a simple JSX element like <h1>Hello, world!</h1> becomes:

import { createVNode as _createVNode } from "vue"

_createVNode("h1", null, "Hello, world!");

Changes Introduced by Vue 3

Vue 2 required @vue/babel-preset-jsx and @vue/babel-helper-vue-jsx-merge-props . Vue 3 simplifies this to a single Babel plugin and includes jsx.d.ts for type checking, eliminating the need for extra runtime libraries.

When to Use JSX

Multiple components in one file : JSX allows defining several functional components in a single file, avoiding the one‑component‑per‑SFC limitation.

Compile‑time prop checking : VS Code can warn about missing props when using JSX, similar to template checks.

Full JavaScript capabilities : Complex logic such as array reversal can be expressed directly in JSX without duplicating code.

Generic components : JSX supports generic component definitions via TypeScript, which is harder to achieve with templates.

Key Points to Consider

Props handling : In templates, props are merged automatically; JSX provides explicit control.

Slot handling : Slots are implemented as createVNode arguments. JSX can pass VNode children directly as props, but the compiler must wrap them in functions to satisfy Vue’s slot expectations. The v-slots directive and object‑slot syntax are discussed.

Performance Comparison

A benchmark with 20,000 nodes shows template‑based rendering is slightly faster than JSX in the given demo, because Vue 3 can leverage static analysis (PatchFlags) and caching more effectively.

PatchFlags and SlotFlags

PatchFlags are bitwise flags that indicate which parts of a VNode are dynamic (e.g., CLASS = 1<<1, STYLE = 1<<2). These flags enable targeted updates during the diff phase. SlotFlags serve a similar purpose for slot content, marking dynamic slots to avoid caching when necessary.

Conclusion

JSX offers powerful flexibility for Vue developers, especially when building reusable components, handling complex logic, or leveraging TypeScript generics, but it may miss some of the compile‑time optimizations that Vue’s template compiler provides.