Unveiled September 18, Vue 3.0 improves performance over Vue 2 in terms of render speed, update speed, memory usage, and bundle size. According to the project, initial render is up to 55 percent faster, updates up to 133 percent faster, and memory usage up to 54 percent less. Also, bundle size is up to 41 percent lighter with tree-shaking, a technique used to reduce the output file size.
Vue internals have been rewritten into a collection of decoupled modules, providing an architecture that offers better maintainability and reduced runtime size. Modules expose lower-level APIs that unlock advanced use cases, such as the compiler supporting AST transforms for build-time customizations. The core runtime provides an API for building custom renderers for different targets, such as native mobile, WebGL, or terminals. Also, the
@vue/reactivity module exports functions that provide direct access to the Vue reactivity system and that can be used as a standalone package.
The Vue 3.0 release milestone marks the “general readiness” of the framework, although some subprojects may still need work. Vue project developers said it was safe to start greenfield projects on version 3.0. Library authors can upgrade their projects, too.
Other new capabilities in Vue 3.0 include:
- A Composition API that makes it easier to use Vue in large-scale applications.
- A codebase written in TypeScript. Type definitions are bundled and up-to-date.
- Experimental features such as
<script setup>,which provides syntactic sugar for using Composition inside Single File Components (SFCs), and
<style var>, which provides state-driven CSS variables inside SFCs.
For the near term, Vue.js builders will focus on migration build capabilities, IE11 support, router and Vuex integration into new tools, and further improvements to template type inference in Vetur tooling.