Yesterday, April 16th, VUE 3 officially entered beta. On the same day, Youya participated in a State of Vue online event. Here’s his slides on Google Docs:

State of Vue Apr 16 2020

Can scientific Internet access can directly open the above link to view. If that’s not convenient, keep reading:

Progress of vUE 3 core

What does it mean to be in Beta?

  • All planned RFCs merged & implemented
  • Focus is now on stability and library integrations

Now that all the planned RFCs have been implemented, the Vue team is focused on making Vue 3 more stable and supporting Vue 3 in third-party libraries associated with Vue.

3.0 comparison 2. X what are the important changes?

  • Performance
  • Tree-shaking support
  • Composition API
  • Fragment, Teleport, Suspense
  • Better TypeScript support
  • Custom Renderer API

This includes performance, tree-shaking support, Composition APIS, fragments, TypeScript support, and custom Render.

performance

  • Rewritten virtual dom implementation
  • Compiler-informed fast paths
  • More efficient component initialization
  • 1.3 ~ 2 x better update performance *
  • 2~3x faster SSR*

In terms of performance, the main thing is to rewrite Vdom, compiler-informed fast Paths. , and more efficient component initialization.

Tree-shaking support

  • Most optional features (e.g. v-model, <transition>) are now tree-shakable
  • Bare – ipads HelloWorld size: 13.5 KB
  • 11.75kb with only Composition API support
  • All Runtime features included: 22.5 KB
  • More features but still lighter than Vue 2

This part of the optimization is mainly to reduce the vUE packaging volume. In many cases, our applications don’t need all of the functionality that VUE provides. In VUE 2 we didn’t have a good way to exclude these unwanted features, but in 3.0 we did it on demand. For example, built-in components such as keep-Alive and Transition, and runtimes with instructions such as V-Model and V-for can be introduced on demand. This will make the volume of the pure vue smaller.

Composition API

  • Usable alongside existing Options API
  • Flexible logic composition and reuse
  • Reactivity module can be used as a standalone library

Composition apis are similar to React Hooks in that their main purpose is to make code logic reusable and thus template-independent. In addition, the separation of the Reactivity module means that vUE 3’s responsive module can be combined with other frameworks. Hao Has posted an article about integrating Vue3 responsiveness into React state management with 40 lines of code. If you are interested, you can check it out.

Fragments

  • No longer limited to a single root node in templates
  • Manual render functions can simply return Arrays
  • “Just works”

Tmeplate is no longer limited to a single root node, and the render function can now return an array, similar to the react.fragments function.

<Teleport>

  • Previously known as <Portal>
  • More details to be shared by @Linusborg

<Suspense>

  • Wait on nested async dependencies in a nested tree
  • Works with async setup()
  • Works with Async Components

Better TypeScript Support

  • Codebase written in TS w/ auto-generated type definitions
  • API is the same in JS and TS
  • In fact, code will also be largely the same
  • TSX support
  • Class component is still supported (vue-class-component@next is currently in alpha)

TS and TSX support has become friendlier. Class components will continue to be supported, but with the introduction of vue-class-component@next, which is currently in the alpha phase.

Custom Renderer API

  • NativeScript Vue integration underway by @rigor789
  • Users already experimenting w/ WebGL custom renderer that can be used alongside a normal Vue application (Vugel)

This is exciting news because it means that we will be able to do WebGL programming in the same way as DOM programming through VUE. To get interested, see here: Getting started Vugel

Progress of VUE 3 ecology

Documentation and migration guide progress

  • New Docs under heavy work by @NataliaTepluhina, @sdras, @bencodezen & @phanan
  • @sdras starting to work on Migration Guide
  • @sodatea has started working on CodeMods

vue-router

  • vue-router@next is currently in alpha, thanks to work by @posva

Vuex

  • vuex@next (same API but with Vue 3 compat) currently in alpha, thanks to work by @KiaKing
  • Team is experimenting with Vuex API simplification for the next iteration

vue-cli

  • Experimental Support via vue-cli-plugin-vue-next by @sodatea
  • (wip) CodeMods support for upgrading Vue 2 applications

vue-test-utils

  • test-utils@next being worked on by @lmiller1990, @dobromir-hristov, @afontcu & @JessicaSachs

DevTools

  • Early prototype already working by @Akryum, full integration will be worked on as we reach beta

IDE Support (Vetur)

  • @znck currently experimenting with Type checking for templates
  • @octref will be working on Vetur integration for Vue 3 in May

Nuxt

  • Nuxt team is working on Vue 3 integration and already has working prototype.

What About 2.x?

  • There will be one last minor release (2.7)
  • Backporting compatible improvements from 3.0
  • Deprecation warnings for features removed in 3.0
  • LTS for 18 months

Vue 2 is not out of date, there will be minor updates and it will be maintained for another 18 months.

conclusion

Although VUE 3 is in beta, it is still a long way from being ready for production. At the very least, it will not be obsolete to continue using VUE 2 in 2020, mainly because the vUE 3 ecology is not yet complete. Just as Python3 has been around for a long time, many people still use Python2, because there are still many Python libraries that are not compatible with Python3.