Vue 3.6 is here: Say goodbye to virtual DOM and enjoy a performance boost!

With the release of the Vue 3.6 alpha version, a brand-new rendering mode called Vapor Mode has been introduced: it bypasses the virtual DOM, delivering extreme performance improvements and smaller package sizes.

Why was the virtual DOM needed in the past?

We know that frequent and extensive DOM operations cause browsers to perform a large number of repaints and reflows, resulting in significant performance overhead.

To address this issue, modern frameworks like Vue introduced the virtual DOM, which is a JavaScript object stored in memory that serves as a lightweight abstract representation of the real DOM.

The virtual DOM significantly improves development efficiency and optimises performance in most scenarios, but it also comes with inherent costs:

• It requires maintaining a virtual DOM tree in memory at all times

• Even if the component content hasn't changed, each update still requires traversing the VNode tree for comparison

What is Vapor Mode?

Vapor Mode is an optional, compile-time-based rendering strategy introduced by Vue.

Its core idea is: during the compilation phase, through static analysis of the template, generate JavaScript update code that is more efficient and precise than the virtual DOM, thereby completely bypassing the virtual DOM's Diff and Patch processes at runtime.

Vapor Mode thoroughly analyses dynamic bindings and structural relationships in templates during compilation, generating ‘point-to-point’ instructions that directly manipulate the DOM.

How to enable and use Vapor Mode?

Enabling it is very simple: just rename the component file to have a .vapor.vue extension (this is the current proposal; the final solution may be slightly adjusted).

Vapor Mode component (Counter.vapor.vue)

<div>

<p>Count: {{ count }}</p>

<button @click="increment">Increment</button>

</div>

</template>

import { ref } from 'vue'

const count = ref(0)

const increment = () => count.value++

</script>

The Future of Virtual DOM

Vapor Mode and Virtual DOM are not mutually exclusive; rather, they complement each other.

We can use Vapor Mode to build the core layout and performance-critical components of an application, while continuing to use VDOM for complex, dynamic sections, achieving the optimal balance between performance and flexibility.

Vapor Mode represents another significant step forward in Vue's exploration of performance optimisation. It is not a rejection of the past but an embrace of the future, offering Vue developers a powerful new option.