View profile

Lessons from Upgrading to Vue 3

Lessons from Upgrading to Vue 3
By Mastering JS Weekly • Issue #51 • View online
We’ve been doing a lot of work with Vue 3 this week, including getting started on migrating our existing Vue 2 tutorials to Vue 3. The migration has been fairly painless: Vue 3 is largely the same old Vue we know and love, with a few cosmetic changes and some new features.
I think we’re all thankful that Vue didn’t pull an Angular. In 2015, Angular announced Angular 2, which had absolutely nothing in common with Angular 1 except the name. Vue 3 introduces a lot of interesting new features, but existing Vue patterns still work.

Angular 2 put a lump of coal in Angular 1 developers' 2015 Christmas stockings
Angular 2 put a lump of coal in Angular 1 developers' 2015 Christmas stockings
Components are Scoped to Apps
Unsurprisingly, the first thing that we saw after upgrading to Vue 3 was an error message: “TypeError: Vue is not a constructor”. In Vue 2, everything was a Vue instance, and you could `$mount()` a Vue instance to the DOM.
In Vue 3, the concepts of apps, components, and Vue instances are more cleanly separated. Instead of starting your app with `new Vue()`, you need to use `Vue.createApp()`.
A minimal app in Vue 3
A minimal app in Vue 3
As a consequence, `$mount()` is now just `mount()`. That’s because, since apps are now separate from Vue instances, we don’t have to worry about prefacing `$mount()` to avoid conflicts with data properties named `mount`.
Components have a new `setup()` Function
The Composition API is Vue’s much-debated new feature that looks vaguely like React hooks if you squint enough. The Composition API makes it possible to define a non-trivial Vue component with just the `setup()` function, no Vue constructor options required.
Composition API lets you define hooks, render functions, etc. from `setup()`
Composition API lets you define hooks, render functions, etc. from `setup()`
Composition API patterns are pretty advanced, and entirely optional. The Composition API can be great for DRY-ing up large apps. In particular, we’re pretty excited about provide/inject, which gives you a neat way to avoid prop drilling without having to use Vuex and Vuex getters.
Standalone Change Tracking
Vue 3’s reactivity API is extremely cool. With 2 lines of code, you can register a watcher that Vue calls whenever a property on a given object changes, without any components or UI-specific logic.
`watchEffect()` is smart enough to re-execute whenever `character.name` changes
`watchEffect()` is smart enough to re-execute whenever `character.name` changes
This is exciting because, combined with the `setup()` function, you can break up your state while retaining change tracking. No need to always pass the entire Vue object whenever you want an outside function to make changes that sync to the UI automatically.
This Week's Tutorials
What's New in Vue 3 - Mastering JS
Components in Vue 3 - Mastering JS
Reactivity in Vue 3 - Mastering JS
Other Interesting Reads
Unconventional Vue—Vue as a Backend Framework
State Management in Vue 3 – Ghiura Alexandru
Did you enjoy this issue?
Mastering JS Weekly

Pragmatic web development. No bloatware allowed!

If you don't want these updates anymore, please unsubscribe here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue