Reactivity in Vue 3 - How does it work?

Gregg Pollack uncovers Vue 3 Reactivity. This is the first lesson from a full Reactivity course, available on VueMastery.com.
Ready to master Vue.js? With weekly Vue js tutorials on the latest topics, and exclusive content with Evan You (the creator of Vue), Vue Mastery is the ultimate learning resource for Vue developers to level-up their skills. Watch more free Vuejs tutorials 👉 www.vuemastery.com/courses
Get in touch 👉 [e-mail]
0:00 Vue 3 Reactivity
1:00 A Simple Vue App
2:00 How can we save the total calculation?
3:55 dep
6:07 Multiple reactive objects

[@tommycard4569]

Years later I still come back to this video, love it

[@user-xj2ye7hx2p]

Well explained the 3 main containers and trigger logic in 10 minutes. That's cool !

[@rthangam77]

Thanks for the video. Any chance we can know how templating works ?

[@mathe42]

there is a mistake! Maps can have objects as keys! In Weakmaps the keys arent strongly held so there can happen GC. There is a great http203 episode about all the weak stuff.

[@ycombinator765]

strong guys don't study weak maps

[@anantawijaya1594]

thanks by the way, love the explanation after using vue for some month 😁

[@Arabian_Epileptic]

Amazing

[@wangmingchang]

nice!

[@VueMastery]

Want to watch the next lesson in this course? Head over to 👉 www.vuemastery.com/courses/vue-3-reactivity/proxy-and-reflect
FYI💡 We have an entire library of premium Vue courses for all skill levels filled with detailed explanations just like this one.

[@icandebug1124]

Greeeat !

[@user-mq8jo5ct9m]

thanks, but where is the next lesson ? it's been a year passed and there isnt any next video yet ! was that just to make me wonder around the playlist and channel ?!

[@VueMastery]

The full course is available here 👉 www.vuemastery.com/courses/vue-3-reactivity/proxy-and-reflect

[@honza139706]

But how are triggers triggered in vue reactivity?

[@DEVDerr]

They're triggered automatically by overriden default object getters and setters behavior, thanks to JavaScript Proxy API.
Each time you call yourVariable.value, then instead of calling default getter => it calls trigger() on your object. That's why in new vue reactivity `.value` is so important. It's directly bound to JavaScript native Proxies

[@bertrodgers2420]

what colour scheme is that please?

[@VueMastery]

Flat UI Dark

[@NoDoubt747]

🙌👏