In 2019, Vue has had a crazy rise in popularity. Its number of weekly downloads doubled from 600K to 1.2M. The highly-anticipated Vue 3.0 — the next iteration of this framework — is scheduled to be released some point in Q1 of 2020.
There are a ton of efficiency, syntax, and optimization changes that are planned in the new update. As a VueJS supporter, something that I’ve been looking into a lot is what I can do to be ready to take full advantage all all the new features as soon as its released.
These are some the tips I’ve gathered to help you hit the ground running as soon as Vue 3.0 is released. Hopefully, these do a good job of preparing us.
1. Become Familiar with the Changes in Vue 3.0
Of course, you can’t prepare for things that you don’t know are coming. That’s why it’s important to read a little bit about what exactly is even changing in Vue 3.0. Some of the important things to note are:
- Composition API — allows for better organization of component code
- Typescript support — allows for type completion and autocomplete
- Faster Render Times — lots of optimization to increase performance
- Static Hoisting — avoids having to recreate static elements
- Proxy Based Observations — helps improve performance and use case coverage of reactivity
I also recommend checking out Evan You’s talk on the Design of Vue3 because it gives a great high level discussion of the behind the scenes thought process.
Overall, it’s definitely important to know what exactly is changing because that may impact how you structure your current Vue projects. Especially if you’re just starting a Vue project, you definitely want to plan well so it’s not a nightmare to transition to Vue 3.0.
2. Start Learning Typescript
One of the most talked about changes coming in Vue3 is Typescript support. The entire Vue codebase is being rewritten in Typescript so that developers can get type inference and autocomplete in their IDEs.
An important note is that this doesn’t mean you HAVE to work in Typescript; Javascript will still work just fine, but there are definitely productivity benefits to working in Typescript.
Typescript is a superset of Javascript that is eventually compiled into Javascript. The difference is that Typescript allows for compile time errors because it allows you to specify a variable’s type.
If you want to start becoming familiar with Typescript, these are great places to start.
3. Learn the Ins and Outs of Vue Templates
Vue 3.0 has tons of rendering optimizations: static hoisting, block tree creation, and even the ability to write custom render methods.
In order to take full advantage of everything that Vue 3.0 has to offer, you definitely have to become an expert on how Vue templates work. Naturally, the best resource for this the official Vue documentation.
Furthermore, understanding static hoisting and block trees can help you design your templates more efficiently. Static hoisting will make it so that static elements will not be recreated on each render. Instead, the same element will be used repeatedly.
Block trees also help reduce the number of reactivity checks that a typical Vue render will perform.
4. Start Working with the Composition API
One of the hottest (and most controversial changes) coming in Vue 3.0 is the Composition API. Currently, Vue2 uses what is called the Options API — in which code for a feature is split all over the component (data, methods, computed, etc.).
This change will make it so all the code for a feature will be grouped together which will increase readability but also make it easier to extract and reuse functionality.
This works by directly exposing Vue’s core reactivity API, which will allow developers to control what is being watched. Also, this introduces a new setup() method which is called right after beforeCreate() and right before created()
Most importantly, it is available to start using NOW if you want to implement the Composition API into your existing projects.
5. Refresh Your Knowledge of the Vue Lifecycle
Like I was saying in the last tip, the Composition API is the new way to add functionality to your components. The fact that it is setup before the created lifecycle hook means that it doesn’t have access to any component data, methods, or computed properties.
It’s unclear how some of the other new features of Vue 3.0 will incorporate themselves into the lifecycle. Regardless, it’s always a safe bet to get a little refresher on the VueJS lifecycle — what properties are accessible when, what order things are called in, etc.
Basically, Keep Learning
In conclusion, just keep learning as much as you can. One thing that the Vue team made clear is that Vue3 is designed to make it easy to transition. So it would be dumb to say, “Vue3 is coming out so I’ll just wait until it releases before getting in Vue”.
But the 5 things that I’m going to be doing to prepare for the release of Vue 3.0 are:
- Become Familiar with the Changes in Vue 3.0
- Start Learning Typescript
- Learn the Ins and Outs of Vue Templates
- Start Working with the Composition API
- Refresh Your Knowledge of the Vue Lifecycle
If you do these things to, you’ll definitely be well on your way to getting ready for Vue 3.0