Understanding JSX in Vue 3: Concepts, Benefits, and Performance

Lin Chengzhang, a developer from ByteDance's Dali Intelligent Frontend team, introduces his work on the Vue 3 Babel JSX Plugin and shares insights about JSX in Vue.

In Vue Single File Components (SFC), the three top‑level blocks are <template> , <script> , and <style> ; JSX, by contrast, is pure JavaScript that can be used as an alternative to the template syntax.

Although Vue officially recommends the template approach, JSX is supported because many developers—especially those coming from React or backend backgrounds—prefer writing UI directly in JavaScript, and Vue aims to accommodate both styles.

JSX originated at Facebook as a JavaScript syntax extension that requires a transform step before execution; it offers the full power of JavaScript while still serving as a declarative UI language.

In Vue 2, JSX required both @vue/babel-preset-jsx and @vue/babel-helper-vue-jsx-merge-props (and optionally vue-tsx-support for TSX). Vue 3 simplifies this by needing only a single Babel plugin and provides jsx.d.ts for type checking.

Practical scenarios where JSX shines include writing multiple small components in a single file, leveraging compile‑time prop checking, exploiting full JavaScript programming capabilities, and defining generic components with TypeScript.

When using JSX, developers should pay attention to prop handling, slot handling, and the trade‑offs between compile‑time checks and runtime size; Vue 3 offers flags such as enableObjectSlots , PatchFlags , and SlotFlags to control optimizations.

A performance comparison shows that template‑based code can be slightly faster because Vue 3 can statically analyze templates, generate PatchFlags, and cache children, whereas JSX‑based code may miss some of these optimizations.

The article concludes with a recap of the advantages and considerations of using JSX in Vue 3, accompanied by reference links to the Babel JSX plugin, JSX specification, Flow, vue‑tsx‑support, and the official jsx.d.ts file.