At VueConf Toronto, Evan You, creator and project lead of Vue.js, previewed Vue 3, the next major iteration of the Vue.js framework.
Vue is a progressive framework for building user interfaces, including single-page applications. The current Vue 2 release brought performance improvements in the form of a smaller library, and a faster, lighter-weight Virtual DOM implementation, forked from Snabbdom, in addition to server-side rendering.
The planned Vue 3 release goes further along these lines and aims at providing an ever smaller and more performant Vue and better developer experience.
Size improvements are to be reached by the combination of greater code modularity, a smaller core runtime, and a tree-shaking-friendly compiler. The new core would thus be reduced from about 20KB to 10KB gzipped. You explains:
The compiler will generate tree-shaking-friendly code. If you use a feature that requires a function in your template, the compiler will automatically generate code that imports it. But if you don’t use a feature, then we generate code that does not import it, which means the feature will be tree-shaken.
Beyond performance improvements through a smaller core, Vue 3 also touts speed improvements. You plans a complete rewrite of the virtual DOM implementation, with the objective to lead to 100% faster mounting and patching of virtual DOM nodes into the real DOM tree. Mounting of virtual nodes is the operation by which virtual nodes are displayed in a specific location on screen. Patching involves comparing virtual DOM nodes representing the target DOM tree, with the actual DOM tree. The objective is to compute a list of changes that transform the actual DOM nodes so that the updated DOM tree matches exactly the targeted virtual one. Among the techniques which would enable faster virtual DOM operations are the compiling of view templates into functions whose source code can be better optimized by the JavaScript compiler.
You mentions, as techniques of significant interest for Vue 3, fast component paths, monomorphic calls, children type detection, optimized slots generation, and hoisting and inlining of static parts of the component tree. Performance at runtime is further improved by switching the current observation mechanism (based on property getters and setters implemented with Object.defineProperty) towards using a proxy-based mechanism. The new mechanism traps update operations on objects, leveraging ES2015 proxies natively implemented in modern browsers. Benchmarks show this improvement potentially doubling the speed while slashing memory usage by half. IE11, which does not implement proxies natively, will still be supported by falling back on the current observation mechanism.
ES2015 is now becoming more universally available in browsers, once we take advantage of that, and explore the opportunity of using ES2015 proxies to reimplement our observation mechanism, the results are actually fantastic : we get full coverage, we get rid of a bunch of caveats in the current vue change detection system (...) it results in better performance.
Vue aims to improve developer experience with version 3 getting rewritten in TypeScript with TSX support. TSX is the TypeScript enhanced version of JSX used by React developers working with TypeScript as well as other projects like Dojo. The switch to TypeScript provides better type checking and useful error messages displayed inside the IDE. The Vue core will also be platform agnostic, making it even easier to target mobile operating systems (iOS, or Android). The debugging cycle should also get shortened as it will be possible to identify what caused a component to re-render.
Experimental features such as a React-inspired Hooks API and Time Slicing Support may also contribute further to a better developer and end-user experience.
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.