In this 7-day course, you'll learn how to build Vue 3's reactivity system from scratch:
- Day 1: Build a basic reactivity system inspired by Vue 2, including
ref()
and dependency tracking
- Day 2: Implement
reactive()
using Vue 3's powerful proxy-based system for deep reactivity
- Day 3: Create
watchEffect()
with advanced features like scheduling, cleanup, and manual stopping
- Day 4: Develop computed refs for creating derived reactive values
- Day 5: Master ref manipulation with
isRef()
, unref()
, and toRefs()
- Day 6: Implement readonly and shallow reactivity for fine-grained control
- Day 7: Build a reactive store, combining all concepts into a powerful state management solution
By the end of the course, you'll have:
- A deep understanding of Vue's reactivity system
- Implemented core functions like
ref()
, reactive()
, computed()
, and watchEffect()
- Created utility functions like
isRef()
, unref()
, and toRefs()
- Built a simple but powerful reactive store similar to Pinia
- Hands-on experience with proxy-based reactivity, dependency tracking, and effect scheduling
Whether you're a Vue beginner or an experienced developer, this course will give you invaluable insights into the inner workings of Vue's reactivity system.