Vue 3.4 Released, Minimizes Reactive Computations, Speeds up Template Parsing

The Vue team recently released Vue 3.4. The new release features a new template parser that claims to be twice as fast and a more efficient reactivity system that reduces unnecessary component re-renders.

For the new release, the Vue team rewrote Vue’s template parser. The team explained:

Previously, Vue used a recursive descent parser that relied on many regular expressions and look-ahead searches. The new parser uses a state-machine tokenizer based on the tokenizer in htmlparser2, which iterates through the entire template string only once.

As a result of the rewriting, the team announced that the parser is consistently twice as fast independently of the template size. Additionally, the rewrite does not cause any breaking changes and should be entirely backward compatible. The parsing speed improvements should trickle down to the ecosystem (e.g., Volar, vue-tsc, miscellaneous community plugins that use the parser) and may result in a shorter build time.

Vue 3.4 also decreases the occurrence of unnecessary recomputations of computed properties. The corresponding pull request details:

• If computed new value does not change, computed, effect, watch, watchEffect, render dependencies will not be triggered
• Multiple computed only trigger effect, sync watch, sync watchEffect once
• Array shift, unshift, splice( only trigger effect, sync watch, sync watchEffect once

As components may rerender as their data dependencies change, efficiency gains in the reactive computations of those dependencies may decrease unnecessary renderings.

One developer celebrated the new release on Reddit:

Again a nice release and breaking changes [are] all predictable and I can list [them] in the fingers of one hand (unless you use TSX then better your hand have 6 fingers)

For the full list of features associated with the release, developers may review the release blog post.

Vue is a progressive framework for building user interfaces, including single-page applications. Vue.js is available under the MIT open-source license. Contributions are welcome via the Vue.js GitHub package and should follow the Vue.js contribution guidelines.