Vue Next Version 3

This article is more than two years old, the content may be outdated

Vue's next version (3.0) changes and features

As the time goes on, all major browsers have adopted ES2015 and a lot features that Vue tries to solve are already solved in this language version, so Vue will get rid of this features and leverage on those implemented in the language itself in order to make the core of the framework smaller, faster and more powerful.

High-level API changes

Regarding the API of the framework everything is gonna be untouched except for render functions and scoped-slots which will probably change their syntax. This change could be compatible with the 2.x version by a compatibility build.

An interesting feature that is going to come in the next release is the support to class-based components. Meaning that we will be able to write components just using the class syntax without the need of transpilation or stage-x features. This doesn't mean that we could not use some futuristic stage-x features cause there will be a mapping with those classes so you would still be able to use features from next generation EcmaScript versions. The object-based component format will still be supported transforming that object into a class internally.

Functional components will be plain functions and async components will need the use of a helper function.

Architecture

As the new version is going to be rewritten in TypeScript the decoupling of the internal modules is gonna be much better.

What does this actually mean to me?

Alright, so having more modular internal components means that the tree-shaking of the build is going to be better and will result in smaller bundle sizes in your application.

Observation Mechanism

The observation mechanism in the current version of VueJs is based on the JavaScript feature Object.definePropertymethod. So this creates a few problems that may not seem visible at first but that are there. For example, if we have a Vue instance we have to declare the data in that object passed in the constructor, and we can't change the data object and expect Vue to change it by itself. This means...

const vm = new Vue({
  data: {
    a: 1, // a is reactive
  },
});

vm.b = 2; // b is not reactive

In the example above we can see clearer what I explained before. The property ais reactive because it was defined in the object passed in the constructor which made Vue create internally some getters/setters that are used by Vue to make it's famous reactivity work. So, because of that creation of getters and setters in the initialization process the new property added to the data object (b) is not reactive because there are no getters and setters for that property. We can see this cycle more clearly on this diagram:

Vue render life cycle

Then, to solve this problem we need to implicitly tell Vue to add a property to the data object, to do so we need the use of the method Vue.set(object, key, value). However, this is still a problem because, what happens if we want to add multiple properties to the data object? Fortunately we have a feature in the JavaScript language that let us merge two objects which is Object.assign({}, ob1, {p1: 1, p2: 2}) , and using this feature we can do the following solution:

const vm = new Vue({
  data: {
    message: "Hello",
  },
});

// then I want to add dynamically a user property
vm.$set(this.data, "user", { name: "Luis" });

// or if we want to add multiple properties
let moreData = {
  user: {
    name: "Luis",
  },
  post: {
    slug: "new-changes-vue",
  },
};

let data = Object.assign({}, vm.data, moreData);
vm.$set(this, "data", data);

But, this is ANNOYING!

Vue's next version uses Proxies as the saviors of this mess. This will solve mainly:

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

Another interesting improvement that Proxies will bring is right on the startup of the application, where if you had a huge dataset it would cause a noticeable overhead but now only the data used to render the view is observed.

In conclusion, Proxies will make Vue have more complete, precise, efficient and debuggable reactivity tracking & API for creating observables.

Other improvements

As we said before, having a more modular codebase means that is better for tree-shaking and this translates to a smaller size. More precisely: < 10kb for the new runtime.

The benchmarks state that there seems to be a performance improvement up to 100%.

There will be support for Fragments and Portals. Fragments are components that return multiple node roots , which was impossible before because you needed a div to wrap your components markup that would serve as the component root node. So Fragments allow you to have multiple root nodes, meaning there is no single div needed to wrap up all your markup. And Portals allow you to render a sub-tree in another part of the DOM.

IE11 Support

When we talk about Proxies we talk about saying goodbye to IE 11 which doesn't support them as CanIUse states, currently there is a 87.17% global support for proxies. But Vue will have a compatible build ready to use for IE11 support.

Source: If you want to see a more detailed version of this article head to the source article written by the creator of Vue (Evan You) on The Vue Point.