What We've Learned from Working with Vue 3

It’s no secret that we’re huge fans of Vue 3. Upgrading to Vue 3 has been straightforward in our experience, but we’ve also learned a lot from Vue 3’s internals that we’ll use in our own apps and libraries.

Vue 3 uses ES6 proxies to track changes under the hood. This may not seem surprising since proxies have been a part of JavaScript since 2015, but Vue is the first major framework to adopt proxies for its core functionality.

One reason why Proxy adoption has been slow is performance: in older versions of Node.js, proxies were an order of magnitude slower than vanilla JS objects. Unfortunately, proxies have lost ground in terms of performance relative to POJOs in recent versions of Node.js: POJOs are now nearly 40x faster.

However, how fast is fast enough? The `Promise#then()` function has similar performance overhead relative to promises as proxies do to POJOs. But few developers hesitate to use promises, because their performance is good enough.

Mongoose is looking into using Proxies for arrays in v6.0. Not surprising since Mongoose and Vue have a lot in common. Performance is a key consideration in this change: we’re looking to match the existing performance of arrays on basic benchmarks.

Vue 2 components were purely declarative: you defined a component by defining properties in a JavaScript object. Vue 3’s new composition API lets you define a component in an alternative way: by making a bunch of imperative function calls in a `setup()` function:

Vue’s declarative API works great for basic examples, but can get a little messy when you have plugins and shared code. For example, suppose you want to have a common `mounted` hook for every component for debugging purposes, but also allow individual components to have their own `mounted` hook.

With the declarative API, multiple mounted hooks is a pain. With the composition API, multiple mounted hooks is easy: calling `Vue.onMounted()` multiple times means you get multiple mounted hooks!

Does that mean that imperative is better than declarative? Absolutely not, otherwise we would all be using javax.swing.

The answer to almost every software engineering question starts with “it depends.” In some cases, declarative works great. In other cases, declarative gets cumbersome and you really just want to write a `for` loop. APIs that enable using both patterns are much more versatile.