Vue.js 3.0 is ditching JavaScript for TypeScript. What else is new?

Last week, Evan You, the creator of Vue.js gave a summary of what to expect in the coming major release of Vue.js 3.0. To provide a better support for TypeScript, the codebase is being written in TypeScript leaving behind vanilla JS. This new codebase currently targets evergreen browsers such as Google Chrome, and assumes baseline native ES2015 support.

Let’s see what else we will see in this major iteration:

High-level API changes

• Template syntax will not see much changes, except some tweaks in the scoped slots syntax.
• Vue.js 3.0 will come with native support for class-based components. This will provide users with an API that is pleasant to use in native ES2015 without the need of any transpilation or stage-x features.
• The Vue.js 3.x codebase will be written in TypeScript, providing improved support for TypeScript.
• Support for the 2.x object-based component format will be provided by internally transforming the object to a corresponding class.
• Functional components can now be plain functions, however, the async components will need to be explicitly created via a helper function.
• The virtual DOM format used in render functions will see major changes. Upgrading will be easier if you don’t heavily rely on handwritten (non-JSX) render functions in your app.
• Mixins will still be supported.

Cleaner and more maintainable source code architecture

To make contributing to Vue.js easier, Vue.js 3.0 is being re-written from the ground up for a cleaner and more maintainable architecture. To do this, the developers are breaking some internal functionalities into individual packages to isolate the scope of complexity. For example, the observer module will be converted to its own package, with its own public API and tests.

As mentioned earlier, the codebase is being re-written in TypeScript. This makes proficiency in TypeScript a primary prerequisite for contributing to the new codebase. However, the type information and IDE support will enable a new contributor to easily make meaningful contributions.

Proxy-based observation mechanism

Vue.js 3.0 will come with a Proxy-based observer implementation that provides reactivity tracking with full language coverage. This aims to eliminate a number of limitations of the current implementation of Vue.js 2, which is based on Object.defineProperty:

• Detection of property addition or deletion
• Detection of Array index mutation or .length mutation
• Support for Map, Set, WeakMap and WeakSet

Additionally, this new observer will have the following features:

• Exposed API for creating observables: This provides a lightweight and simple cross-component state management solution for small to medium scale scenarios.
• Lazy observation by default: In Vue.js 3.x, only the data used to render the initially visible part of an app will need to be observed. This will eliminate the overhead on app startup if your dataset is huge.
• Immutable observables: Immutable versions of a value can be created to prevent mutations even on nested properties, except when the system temporarily unlocks it internally.
• Better debugging capabilities: Two new hooks, renderTracked and renderTriggered are added. These will help you precisely trace when and why a component re-render is tracked or triggered.

Other runtime improvements

Smaller runtime

The new codebase is designed to be tree-shaking friendly. The built-in components and directive runtime helpers will be imported on-demand and are tree-shakable. As a result, the constant baseline size for the new runtime is <10kb gzipped.

Improved performance

On initial benchmarks, the developers are observing up to 100% performance improvement across the board. Vue.js 3.0 will reduce the time spent in JavaScript when your app boots up.

Built-in support for Fragments and Portals

Vue 3.0 will come with built-in support for Fragments and Portals. Fragments are the components returning multiple root nodes. Portals are introduced to render a sub-tree in another part of the DOM, instead of inside the component.

Improved slots mechanism

All compiler-generated slots are now functions and invoked during the child component’s render call. This will ensure dependencies in slots are collected as dependencies for the child instead of the parent. This means that:

• When a slot content changes, only the child re-renders
• When the parent re-renders the child does not have to if its slot content did not change

This improvement will provide even more precise change detection at the component tree level.

Custom Renderer API

Using this API you will be able to create custom renderers. With this API, it will be easier for the render-to-native projects like Weex and NativeScript Vue to stay up-to-date with upstream changes. This API will also make the creation of custom renderers for various other purposes trivially easier.

Along with these, they have announced few compiler improvements and IE11 support. They haven’t revealed any date yet but we can expect Vue.js 3.0 to release in 2019.

To know more, check out their official announcement on Medium.

Vue CLI 3.0 is here as the standard build toolchain behind Vue applications

Introducing Vue Native for building native mobile apps with Vue.js

Testing Single Page Applications (SPAs) using Vue.js developer tools