Reactivity in Vue

08/15/24 • 42 min

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.

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

Previous Episode

Documentation and Migration: From Vue 2 to Vue 3 (with Natalia Tepluhina)

For the 20th episode we surprise you with a "in-person" podcast episode!

Alex is joined by Principal Engineer and Vue Core Team Member Natalia Tepluhina to talk about two important topics - Documentation and the Migration from Vue 2 to Vue 3.

Learn in this episode what Natalia does in the core team, how difficult writing docs is and how to improve your doc writing skills. Also, gain insights in how GitLab's migration from Vue 2 to Vue 3 is going and get invaluable tips if you also have to migrate a project over!

Enjoy the episode!

Chapters

(00:00) - Welcome to DejaVue!
(01:32) - When did you start using Vue.js?
(02:42) - How could you introduce Vue at work?
(04:43) - Joining GitLab
(07:15) - Getting into public speaking
(10:05) - Memorable moments as a speaker
(16:22) - Moving to Amsterdam
(18:22) - Being part of the Vue.js Core Team
(20:27) - (Not) Documenting Vue Methods
(22:21) - $parent in Vue 2
(22:59) - AI as the new docs?
(25:00) - Regular Contributors to the Vue docs
(26:14) - Is writing docs is easy?
(31:45) - Documenting Vue 3 at release
(34:04) - Documentation as a garden
(37:00) - Separating Options and Composition API docs
(38:20) - Preferring the Options API for huge teams?
(41:49) - Inline Composables and other architectural patterns
(45:35) - Overusing Watchers
(46:57) - People - Share your thoughts and patterns!
(48:39) - Vue.js DE Conference
(49:14) - Migration from Vue 2 to Vue 3
(50:10) - How the component library blocks migration
(54:10) - Updating Unit tests during migration
(55:16) - No CAPI during migration
(57:13) - Migration of big old projects
(58:45) - Responsibility of library authors
(01:05:01) - Vue 3 Breaking changes
(01:06:31) - Will the migration ever end?
(01:07:48) - Other tips for migrating
(01:09:19) - Migrating without tests
(01:10:45) - Rewrite vs Migration?
(01:11:35) - Not migrating at all?
(01:13:54) - No CAPI during migration?
(01:15:58) - New questions with CAPI
(01:16:58) - Natalia back on stage at a conference?
(01:18:16) - What could the Vue team have done better?
(01:20:21) - Nuxt Tips Collection
(01:21:00) - Wrapping up

Links and Resources

$10 off for Michael's Nuxt Tips Collection* with this link and the code DEJAVUE
10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUE
GitLab
DejaVue Episode with Vanessa
Options API vs Composition API
Organizing Composition API Code
Bootstrap Vue
Ilya Klymov
Bootstrap Vue Next

Next Episode

Signals

It was teased in the last episode already and here it - Michael and Alex talk about the current hype in the front end development community: Signals. But if you as a Vue developer don't feel hyped around it and maybe even didn't hear much around it, fear no more - that is normal and will be explained in the episode too.

Join the two Vue experts covering the history of Signals, what's behind the term and how they work in Vue.js and other major frameworks.
And of course, the TC39 proposal to add Signals to the language itself wasn't forgotten either.

Enjoy the episode!

Chapters

(00:00) - Welcome to DejaVue
(01:06) - Signals and Reactivity
(04:41) - Functional Programming
(10:51) - Signals in Modern Frameworks
(11:48) - How Signals look like in other Frameworks
(14:20) - Signals in Vue
(15:20) - Signals vs. refs?
(17:51) - A Standard for Signals
(21:54) - Benefits of Signals in the language
(25:16) - Vue.JS DE Conf 2024

Links and Resources

$10 off for Michael's Nuxt Tips Collection* with this link and the code DEJAVUE
10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUE
DejaVue #E022 - Reactivity in Vue
Haskell
OCaml
Elixir
Elm
Zod
Valibot
Solid.js
Building solid-like Signals in Vue with shallowRef
Vue Docs on Signals
TC39 Proposal
VueUse

DejaVue - Reactivity in Vue

Transcript

Alexander Lichter00:00:00.719

Hey everybody, welcome to DejaVue.

Michael Thiessen00:00:04.240

It's your favorite Vue podcast. You just don't know it yet. I am Michael Thiessen, and I'm a full time Vue educator, creating content and courses and books and all that great stuff to teach you about Vue and Nuxt. And I'm here with Alex, my wonderful cohost.

Alexander Lichter00:00:23.625

Thank you so much. Yeah.