JavaScript framework Vue.js goes for speed and independence in 3.2 release

JavaScript framework Vue.js goes for speed and independence in 3.2 release

The Vue.js team has pushed out version 3.2 of the popular JavaScript UI building framework, promising users performance improvements and introducing a method for creating custom elements through the tool’s component APIs.

DefineCustomElement is meant to let programmers build UI component libraries that can also be used outside a framework context, which is useful when components are planned to be integratable into different technology stacks. The method accepts the same arguments as defineComponent, but returns a custom element constructor that extends HTMLElement. It also works with Vue’s single file components (SFC), though this use case requires a bit of additional care with style tags. 

Speaking of components, the Vue team used the 3.2 release to declare SFC-related features <script setup> and <style> v-bind generally available. While the first exposes all top level bindings to a template, v-bind allows the connection of a component’s state and style. Besides the stabilisation work necessary to leave the experimental status behind, <script setup> was fitted with support for namespaced component tags and non-explicit type imports.

The addition also serves as the foundation for some experimental compile-time macros that are meant to simplify reactive code a bit by offering ways to use refs without value — something that has been a source for complications in the past. Other noteworthy changes include an ECMAScript module in the server-side rendering package which can be used inside runtimes other than Node.js (in serverless scenarios for example), and new methods for rendering to the Web Streams API.

Library authors are encouraged to check out the newly added Effect Scope API for @vue/reactivity. The interface is an abstraction of the event collection and disposal capabilities available in a component’s setup(). Before its introduction, effects needed to be manually collected when used outside of components or as a standalone, since they need to be disposed when a component is unmounted otherwise memory leaks and unexpected behaviour might occur. 

To counteract that, developers can now create a scope via EffectScope, which is able to run a function and automatically collect reactive effects such as computed and watchers created during synchronous execution. Another useful addition are the onTrack/onTrigger debug options for computed which are now part of the reactivity package.

Vue.js creator Evan You also heavily highlighted the performance improvements that got shipped with the new release, noting “significant performance improvements to Vue’s reactivity system”. The template compiler should work faster as well, and a v-memo directive has been added to memoize part of the template tree and skip updates should nothing have changed since the last render.

Before updating, it’s worth noting that the current version relies on Template Literal Types and therefore requires a TypeScript version newer than 4.1 to be installed. Vue.js 3.2 also uses new runtime helpers, so code generated with it won’t work with earlier versions of the runtime.