Reactivity in Vue

Join Alex and Michael on a talk about a key topic in Vue.js - the reactivity system. Before diving into how it works in Vue 3, reactivity in Vanilla JS is covered. Then, the differences between the major Vue versions are discussed, showing an astonishing evolution in terms of DX but also performance when it comes to reactivity.
Of course, the ref vs reactive topic can’t be left out, and neither can signals and vapor mode.
Sounds interesting? Then tune in!

Enjoy the episode!

Chapters

• (00:00) - Welcome to DejaVue
• (01:38) - What is Reactivity in general?
• (03:47) - Reactivity in JavaScript?
• (07:45) - Reactivity in Vue 1
• (09:08) - Changes to reactivity in Vue 2
• (10:47) - Reactivity system and caveats in Vue 2
• (15:10) - Vue 3 Reactivity with Proxies
• (19:00) - No IE11 support
• (20:22) - Ref and Reactive in Vue
• (25:12) - shallowRef, triggerRef and more
• (28:23) - Why not shallowRef by default?
• (31:24) - Vue's reactivity system as a standalone package
• (34:21) - Vapor Mode
• (40:52) - Wrapping Up

Links and Resources

• $10 off for Michael's Nuxt Tips Collection* with this link and the code DEJAVUE (Release on Aug 5th)
• 10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUE
• DejaVue #E015 with Evan You
• Petite Vue Talk
• Debugging Guide: Why Your Vue Component Isn't Updating (and how to fix it)
• Marc Backes - Building a Time Machine with Proxies
• CanIUse Beowser Usage Stats
• Michael Thiessen on ref vs. reactive
• Alex's shallowRef guide
• Alpine.js
• Reactivue - Vue CAPI in React 👀
• Arrow-js
• Vapor Mode Repo
• Vapor Mode Playground

Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.