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!
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.
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!
I> TypeScript will be a prerequisite if you're interested in contributing to the Vue 3.0 source code directly 😛.
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 (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.
Vue 3.0 aims to expose the reactivity observable API to allow developers to handle simple cross-component state management. Here’s a code snippet that Evan also shared in the Vue 3.0 Updates presentation that shows an example of how an observable/effect pattern can be pulled and directly used:
import { observable, effect } from 'vue'
const state = observable({
count: 0
})
effect(() => {
console.log(`count is: ${state.count}`)
}) // count is: 0
state.count++ // count is: 1In the example above, the observable and effect constructors are imported directly from the Vue library. A state object is created and set to an observable constructor that wraps an object containing a count variable set to 0. The effect constructor declares a call back function that has access to and console logs the state.count value. Whenever state.count is ever changed, the effect callback function runs!
Though this is a brief example, this shows us that having direct access to the exposed reactivity API could open the doors to allowing components share information in a really easy way!
What we’ve talked about thus far are only some of the things that are in the pipeline with what Vue 3.0 is expected to bring. There are a whole slew of more advanced core changes being done to the library such as Static Tree Hoisting, Optimized Slots Generations, Monomorphic Calls, etc. to help achieve the goals of having a smaller, more manageable, and faster library.
The Vue team has mentioned that there are to be a series of steps in the coming year such as the Public Feedback via RFCs stage, Alpha Phase, and Beta Phase, before the library is launched. If you’re interested, keep your eyes peeled for these phases and be sure to read and check out the following links for more details:
Now when exactly is Vue 3.0 expected to launch? We know that it’ll be within sometime next year.
Though when exactly in the year is still a little too soon to say, we’ll be here to keep you up to date when it happens! We’ll see you tomorrow for the very last day of the course!