Evan You Previews Vue.js 3.0 🔥

Gregg Pollack
Nov 15, 2018 · 5 min read

Written by Gregg Pollack and Adam Jahr.

Image for post
Image for post

Evan You previewed Vue 3 this morning during his keynote talk at Vue Toronto. By taking advantage of new abilities enabled by modern browsers, Vue 3 will be an improved evolution of the Vue.js we already know and love. We took notes and combined those with his slides below.

Update: Vue Mastery’s Vue 3 Essentials course is now available, and we also have a Vue 3 Composition API cheat sheet available to download free.

The tl;dr? We can expect Vue 3 to be:

  • Faster
  • Smaller
  • Have more maintainable source code
  • More native-friendly
  • Easier to use

Evan and the Vue team’s goal is to make the transition to Vue 3 as smooth as possible, where the changes are invisibly improving the framework.

Making it Faster

While Vue is already quite fast, Evan shared that Vue 3 will be even faster. Here’s how…

Virtual DOM Rewrite

With the Virtual DOM being rewritten from the ground up, we can expect more compile-time hints to reduce runtime overhead. And the rewrite will include more efficient code to create virtual nodes.

Image for post
Image for post

If you want to learn more about what this code is doing, we talk about the Virtual Dom in my Advanced Components course.

Optimized Slots Generation

Currently in Vue, when a parent component re-renders, its child(ren) also has to re-render. With Vue 3, the parent and child can be re-rendered separately.

Image for post
Image for post

Static Tree Hoisting

With static tree hoisting, this means Vue 3’s compiler will be able to detect what is static and then hoist it out, reducing the cost of rendering. It’ll be able to skip patching entire trees.

Image for post
Image for post

Static Props Hoisting

Additionally, we can expect static props hoisting, where Vue 3 will skip patching nodes that aren’t going to change.

Image for post
Image for post

Proxy-based Observation

Currently, under the hood Vue’s reactivity system is using getters and setters with Object.defineProperty. However, Vue 3 will use ES2015 proxies for its observation mechanism. This removes caveats that previously existed, doubles the speed, and uses half of the memory.

Image for post
Image for post

In order to continue to support IE11, Vue 3 will ship a build that supports both the old observation mechanism and the new proxy version.

Making it Smaller

Vue is already quite small, at around 20kb gzipped at runtime. But we can expect it to get even more compact, at 10kb gzipped for the new core runtime. This will be accomplished in large part by eliminating the libraries you’re not using (aka Tree Shaking). For example, if you’re not using the transition element, it won’t be included.

Making it More Maintainable

While the majority of Vue developers aren’t working on the library itself, it’s good to know that Vue 3 will bring more maintainable source code. Not only will it be using TypeScript, but many packages will be decoupled making everything more modular.

Image for post
Image for post

Making it Easier to Target Native

The runtime core will also be platform agnostic, making it even easier to use Vue with any platform (ex. Web, iOS, or Android).

Making Your Life Easier

The Observer module has been extracted into its own package, allowing you to use it in new ways:

Image for post
Image for post

It’s also going to be easier to trace where a re-render was triggered. During his talk, Evan did some live coding and showed how to trace through a Vue app (using the code below) to figure out what triggered a component to re-render. This will be quite useful in bigger applications and performance fine-tuning.

Image for post
Image for post

Vue 3.0 will also have Improved TypeScript support, allowing for a new level of type checking and useful errors & warnings inside your editor.

Image for post
Image for post

Experimental Hooks API

When we need to share behavior between two components in Vue, we typically use Mixins. However, Evan is experimenting with a Hooks API that avoids some of the gotchas from Mixins, and fits better with idiomatic Vue code.

Experimental Time Slicing Support

When you have lots of components that are all trying to re-render at the same time, any browser can start crawling, making the user experience difficult.

Evan showed how he’s experimenting with Time Slicing, breaking up JS execution into segments that yield to the browser if there’s user interaction to be processed.

Image for post
Image for post

Let’s ReVue

I already enjoy coding with Vue, and I’m excited to see improvements on the horizon that make Vue more competitive, modular, easier to debug, and enjoyable to develop. There’s no release date on this one, other than “late next year.”

If you’d like to learn more about the internals and advanced features of Vue, be sure to check out my Advanced Components course on Vue Mastery, where in between lessons I speak with Evan You talking about the Vue internals.

BTW, until next Tuesday you can get 25% off an annual subscription on Vue Mastery by using the coupon code HOLIDAY25.

Vue Mastery

The ultimate learning resource for Vue.js Developers

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store