View profile

What We've Learned from Working with Vue 3

What We've Learned from Working with Vue 3
By Mastering JS Weekly • Issue #55 • View online
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.

Proxies are Production-Ready
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.
Proxies are still much slower in Node.js 14
Proxies are still much slower in Node.js 14
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.
Both Imperative and Declarative
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:
You can define a mounted hook and a render function in the `setup()` hook
You can define a mounted hook and a render function in the `setup()` hook
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.
Building layouts imperatively can get cumbersome
Building layouts imperatively can get cumbersome
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.
Check out the brand new Vue 3 Master Class from Vue School!
Check out the brand new Vue 3 Master Class from Vue School!
Most Recent Tutorials
How to Use axios.all() to Make Concurrent HTTP Requests - Mastering JS
The `db` Property in Mongoose - Mastering JS
How to Use Mongoose find() with Async/Await - Mastering JS
Other Interesting Reads
Thoughts on ES6 Proxies Performance | www.thecodebarbarian.com
When To Use The New Vue Composition API (And When Not To) - Vue.js Developers
Did you enjoy this issue?
Mastering JS Weekly

A weekly summary of our tutorials

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