Source Code Review: Vue 3 Reactivity - Reactive Programming Brilliance!

Today, we take a deep dive into the Vue 3 source code and learn all about how Vue's reactivity system works under the hood. This is the most INVALUABLE step you can take as a Vue developer and it will undoubtedly put you in the TOP 1% of Vue devs.

We'll start by understanding the primary mechanism behind Vue's reactivity system - proxies, track, and trigger. We even spot a very interesting use case for the rare WeakMap data structure!

Next, we learn how the reactive function works in conjunction with effects (watch and watchEffect). As a result, we will be able to instinctually avoid common mistakes and pitfalls Vue developers make when they don't understand WHY computed properties or watchers do what they do.

Finally, we review the code for computed properties and refs, which only aid our understanding as they tie together the fundamentals of this incredibly creative and masterful codebase.

⏱️ Chapters ⏱️
0:00 Introduction
1:09 Source Code Setup
3:15 What does the reactivity package export?
3:53 Diving into Vue 3 internals
5:27 The reactive function
9:00 Effects - how does Vue *know* data has changed?
13:00 The trigger function and effect runners
20:05 Getter traps and the track function
25:11 The effect stack
28:10 What inspired this project?
28:56 Computed properties under the hood
32:25 Ref under the hood

📚 Resources 📚

[regibyte]

Man this is really impressive stuff, thank you for your good work.

[gamesmaniac]

thank you, been looking for something like this.