Vue 3.2, a new release of the popular JavaScript framework, offers better performance as well as improvements to single file components and web components. Vue 3.2 was announced on August 5.
With the upgrade, Vue’s reactivity system, which is intended to simplify state management, gains a more efficient ref implementation, faster dependency tracking, and lower memory usage. Performance of the template compiler also has been improved, with faster creation of Vnodes (virtual nodes). A new v-memo directive provides the ability to “memoize” part of the template tree. A v-memo hit lets Vue skip virtual DOM diffing and the creation of new Vnodes altogether. This capability can improve performance in certain scenarios, such as large v-for lists.
For web components, Vue 3.2 introduces a defineCustomElement method to create native custom elements using Vue component APIs. Developers can build Vue-powered UI component libraries that can be used with any framework or no framework at all.
For single file components (SFC), also known as “.vue” files, two features have graduated from experimental status to stable: <script setup>, a compile-time syntactic sugar to improve ergonomics when using Composition API inside SFCs, and <style> v-bind, enabling component state-driven dynamic CSS values in SFC <style> tags.
Installation instructions for Vue can be found at v3.vjs.org. Other new features in Vue 3.2:
- For server-side rendering, the @vue/server-renderer package ships an ES module build that is decoupled from Node.js built-ins, making it possible to bundle and use @vue/server-renderer for use inside non-Node.js runtimes such as Cloudflare Workers or Service Workers. Streaming render APIs have been improved as well, with new methods for Web Streams API.
- An Effect Scope API has been introduced to control the disposal timing of reactive effects (computed and watchers), making it easier to leverage the Vue reactivity API out of a component context and unlocking some advanced use cases inside components. This low-level API is intended mostly for library authors. The feature’s RFC covers motivation and use cases.
Vue 3.2 also contains some bug fixes. Although there are no breaking changes to public APIs, there are some compatibility-related notes. For example, code generated by the template compiler in Vue 3.2 and later will not be compatible with previous runtime versions, due to usage of new runtime helpers. A full changelog for Vue 3.2 can be found on GitHub.