As the summer winds down and we look ahead to fall, we also look ahead to the release of the next major version of the popular frontend framework VueJS. Presumably, their November conference will focus on the next major release of this ever-growing open-source project. In anticipation of the arrival of Vue 3.0, I’d like to go through a few of the changes that stood out to me for one reason or another: more efficiency, simplicity, reducing annoying problems, etc.
New Composition API
One of the first things that stood out to me is the addition of the entirely new Composition API, which will not be outright replacing the Options API that Vue 2.x components utilized but will presumably become the de facto design pattern for future Vue applications. To quote the development team’s reasoning behind this decision:
“Organizing logics with component’s options (
watch) works in most cases. However, when our components get bigger, the list of logical concerns also grows. This can lead to components that are hard to read and understand, especially for people who didn't write them in the first place.”
The essential difference between these two APIs is the Composition API defines its data structure and assigns lifecycle hooks, watchers, and so forth from one method, the
setup method. The result is much cleaner code, that’s a lot easier to refactor later (you won’t find yourself creating a never-ending chain of methods as your feature set evolves). The new References concept is going to make understanding reactivity a lot easier in my opinion as well. Creating something as a Reactive Reference within your component assures that it is reactive throughout — no more worrying about what isn’t reactive, or using tricks like Vue.set to make properties that weren’t in the original component design reactive.
Teleport is a brand new feature of Vue 3.0 that effectively replaces the need for 3rd party libraries such as Vue Portal. Probably the most common use case for Teleport and this type of feature, in general, is the positioning of elements on the page. For example, if you have some HTML nested deep within your component tree for a modal window, the positioning of the modal would be relative to the parent component. In that case, we want the modal to be living at a pretty high level within the DOM so that it’s positioning can easily be derived relative to the body container. With teleport, it’s really as easy as wrapping the desired bit of HTML in a
<teleport> tag with a
to attribute giving it a selector to append to. For example (taken from Vue 3.0 docs):
In the given example above, the modal is appended to the body tag instead of residing within the nested component HTML. It’s the same thing as Vue Portal, but unlike Vue Portal, you don’t have to predefine a destination for your HTML, any selector in theory should work as a target in Teleport.
In conclusion, Vue 3.0 clearly attempts to solve some of the common problems of Vue 2.0, and also offers some new built-in functionality that wasn’t present in the last release. All in all this release looks promising, without breaking too many things. Happy coding!