What's new in Vue 3.4

Vue.js, the progressive JavaScript framework, takes a significant leap forward with the release of version 3.4, aptly named "🏀 Slam Dunk." This latest iteration introduces a host of powerful features and optimizations, reinforcing Vue's commitment to performance, developer experience, and stability.

1- 2X Faster Parser

Vue 3.4 brings forth a groundbreaking enhancement to the template parser, resulting in a remarkable 2x speed boost. The transition from a recursive descent parser to a state-machine tokenizer ensures consistent performance gains for templates of all sizes.

Notably, this optimization extends to Script and Style Single File Component (SFC) compilation, showcasing a substantial ~44% improvement. Vue 3.4 promises faster builds, making it an exciting update for developers relying on Vue SFCs in their projects.

2- Improved Reactivity System

A substantial refactor of the reactivity system in Vue 3.4 focuses on elevating the efficiency of computed properties. Now, callbacks fire only when the computed result undergoes a change, mitigating unnecessary component re-renders. This optimization extends to scenarios involving multiple computed dependencies and specific array methods, promising a more responsive and performant reactivity system.

<!-- Before 3.4 -->
<template>
  <div>{{ isEven }}</div>
</template>

<script>
export default {
  setup() {
    const count = ref(0);
    const isEven = computed(() => count.value % 2 === 0);

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

    count.value = 2; // logs true again
  },
};
</script>

Prior to version 3.4, the watchEffect callback would trigger each time the value of count changed, even when the computed result stayed consistent. Following the optimizations implemented in Vue 3.4, the callback is now activated solely when there is an actual change in the computed result.

3- Stable defineModel

The defineModel macro, initially introduced as an experimental feature in Vue 3.3, has now graduated to stable status in version 3.4. This macro simplifies the implementation of components supporting v-model, offering better support for usage with v-model modifiers. With the stability status, developers can confidently incorporate defineModel into their projects, benefiting from streamlined v-model implementations.

4- Same name v-bind

This feature has been frequently requested in the past. Originally, we had concerns about its usage being confused with boolean attributes. However, after revisiting the feature, we now think it makes sense for v-bind to behave a bit more like JavaScript than native attributes, considering its dynamic nature.

<img :id :src :alt>
<!-- Nice & Tidy :)-->

That's it for this article, for more feature you can checkout the official release at: vue blog