Vue 3.4 Release: Faster Template Compiler, Refactored Reactivity, and New API Features

Today we are pleased to announce Vue 3.4 "🏀 Slam Dunk Master". This version includes substantial internal improvements, most notably a rewritten template compiler that doubles parsing speed, and a refactored reactivity system that makes effect triggering more accurate and efficient. It also adds many quality‑of‑life API improvements such as a stable defineModel and a new shorthand for v‑bind .

Recommended Actions

When upgrading to 3.4, also update the following dependencies: Volar / vue‑tsc@^1.8.27 (required) @vitejs/plugin‑vue@^5.0.0 (if using Vite) nuxt@^3.9.0 (if using Nuxt) vue‑loader@^17.4.0 (if using webpack or vue‑cli)

If using TSX with Vue, check the "Removed: Global JSX Namespace" section for required changes.

Make sure you are no longer using any deprecated features; warnings will appear in the console and those features may have been removed in 3.4.

Highlighted Features

Template Compiler Speed Doubled, Faster SFC Build

In 3.4 the template compiler was completely rewritten. The old recursive‑descent parser relied on many regular expressions and look‑ahead searches. The new compiler uses a state‑machine tokenizer based on htmlparser2 that scans the template string only once, resulting in roughly twice the speed for all template sizes while remaining 100 % backward compatible.

Integrating the new compiler also uncovered further SFC build performance gains: benchmarks show about a 44 % improvement when compiling both script and template sections with source‑map generation, so most projects using Vue SFCs should see faster builds, though real‑world end‑to‑end build times may see smaller gains.

Outside of Vue core, the new compiler benefits Volar / vue‑tsc performance and community plugins that need to parse Vue SFCs or templates.

More Efficient Reactivity System

Context: PR#5912

Vue 3.4 includes a substantial refactor of the reactivity system to improve the efficiency of computed property recomputation.

For illustration, consider the following example:

const count = ref(0)
const isEven = computed(() => count.value % 2 === 0)

watchEffect(() => console.log(isEven.value)) // logs true

count.value = 2 // logs true again

Before 3.4, every write to count.value would trigger the watchEffect callback even if the computed result did not change. After the 3.4 optimization, the callback runs only when the computed value actually changes.

Additional improvements in 3.4:

Multiple computed dependencies trigger a single synchronous effect.

Array methods shift , unshift , and splice now trigger only one synchronous effect.

These changes reduce unnecessary component re‑renders while staying fully backward compatible.

defineModel Now Stable

Context: RFC#503

defineModel is a new <script setup> macro that simplifies support for v-model . It was experimental in 3.3 and is now stable in 3.4, providing better support for v‑model modifiers.

Related files: Revised Component v‑model section, defineModel API reference.

v‑bind Shorthand

Context: PR#9451

You can now write:

<img :id="id" :src="src" :alt="alt">

instead of the longer form:

<img :id :src :alt>

This feature was requested frequently; its behavior is more like JavaScript than a native attribute, so the shorthand is appropriate.

Improved Hydration Mismatch Errors

Context: PR#5953

Vue 3.4 improves hydration mismatch error messages by:

Rephrasing the wording (server‑rendered vs client‑expected).

Including the problematic DOM node in the message for quick location.

Freezing mismatch checks for classes, styles, and other dynamic bindings.

A new compile‑time flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ can be enabled to force inclusion of full details even in production builds.

Error Codes and Compile‑time Flags Reference

To reduce bundle size, Vue drops long error messages in production builds, leaving short error codes that are hard to decipher without consulting the source. Documentation now includes a production error reference page and a compile‑time flags reference with guidance for configuring them in various build tools.

Removed Deprecated Features

Global JSX Namespace

Starting with 3.4 Vue no longer registers a global JSX namespace by default, avoiding conflicts with React and allowing TSX from both libraries to coexist. Users of TSX have two options:

Explicitly set jsxImportSource to 'vue' in tsconfig.json , or add /* @jsxImportSource vue */ at the top of each file.

If your code relies on the global JSX namespace (e.g., using JSX.Element ), you can import vue/jsx to retain the previous global behavior.

This is a type‑only breaking change in a minor version.

Other Removed Features

Reactivity transform, deprecated in 3.3, has been removed; users can continue via the Vue Macros plugin.

app.config.unwrapInjectedRef has been removed; it was deprecated in 3.3 and enabled by default.

Template event listeners @vnodeXXX are now compiler errors; use @vue:XXX instead.

The v‑is directive has been removed; replace with the vue: prefixed is attribute.