Vue 3.0 and the future of Vue

#

In today's article, we'll take a brief look at some of the cool features Vue 3.0 is expected to bring when it arrives.

Everything we’ve discussed within this course covers the latest current release of Vue, often labeled as version 2.x.

In Sept. 2016, the Vue framework was rewritten and released as version 2.0. Vue 2.0 introduced new concepts such as a lightweight virtual DOM implementation, render functions, and server-side rendering capabilities. In addition, version 2.0 was rewritten to provide significant performance improvements over version 1.x.

Exactly two years later, Evan You published Plans for the Next Iteration of Vue.js, an article that summarizes a talk he gave at Vue.js London presenting a sneak peek of what’s coming in the upcoming Vue release. At November 15th, 2018 and as the keynote speaker of VueConfTO - Evan took a deeper dive to explain some of the features Vue 3.0 would bring.

The Plans for the Next Iteration of Vue.js article and Evan’s slides from VueConf TO are both stellar in their explanations. As a result, we won’t be going into too much detail in this article but will summarize some of the cool updates coming with Vue 3.0!

Vue 3.0

#

Breaking changes

#

Though Vue 3.0 will have some breaking changes, the good news is that the Vue API will largely either remain the same or have a clear compatibility build with Vue 2.x. Scoped slots and the native JavaScript process of writing render() functions are to experience some significant changes.

Virtual DOM re-write (with TypeScript!)

#

The core Virtual DOM source code implementation is getting a complete re-write with TypeScript! The Virtual DOM implementation is being re-written to achieve 100% faster mounting and patching which supports one of the main goals of making the Vue library even faster then it is right now.

The source code has moved away from using Flow to now instead use TypeScript as the main types interface. This doesn't mean we will have to use TypeScript with Vue but it does pave the way for improved TypeScript support in Vue 3.0!

TypeScript will be a prerequisite if you're interested in contributing to the Vue 3.0 source code directly 😛.

IE11 Support

#

Vue 3.0 is to adapt a Proxy based observation mechanism for the detection and observation to changes within Vue instances. This is great because now, some of the caveats we’ve mentioned in this course like the inability to add/delete new properties in an instance or directly mutate data arrays will no longer be a problem in Vue 3.0!

Since Proxy based observations aren’t compatible and can’t be transpiled for IE11, a separate build will be available for developers building for IE11. This particular build will default to Vue 2.x’s Object.defineProperty API to detect Vue instance changes - which would result in having the same detection caveats that currently exist.

Class Based Components

#

Class based components (which we haven’t really discussed in this course) will be getting first class support in Vue 3.0!

Class based components will involve using the ES6 class syntax to create a component instance. Here's an example of a class-based component, called Hello, that Evan originally displayed in his Vue 3.0 Updates presentation:

interface HelloProps {
  text: string
}

class Hello extends Component<HelloProps> {
  count = 0
  render() {
    return <div>
      {this.count}
      {this.$props.text}
    </div>
  }
}

The Hello component above is constructed with the class syntax and extends a Component keyword. The component uses the render() function with JSX to create the markup of the component.

Some people prefer using the class-based syntax to construct components due to improved TypeScript declaration and having components be written in a more concise manner.

Though potentially different to what Vue 3.0 would bring: you can try out class-based components in Vue 2.x by scaffolding a Vue CLI project, selecting the Typescript feature, and answering ‘Yes’ to using a class-style component syntax. This will scaffold the project and allow the declaration of class components with the help of the vue-class-component library.