This material was created by Marc Backes in order to show how reactivity is solved in Vue 3.
It contains a basic implementation of the Vue 3 reactivity engine - from scratch.
This is the main branch, but there are branches that represent different stages of the project, so people can follow along step by step.
- Stage 0: Basic HTML and JS structure set up
- Stage 1: Prove why we need a reactivity engine
- Stage 2: Add observer pattern (basic)
- Stage 3: Set up proxy
- Stage 4: Write reactive function
- Stage 5: Enhance observer pattern (with depsMap/targetMap)
- Stage 6: Add watcher
- Stage 7: Refactor code take out user code from lib code
- Stage 8: Change total in the DOM
- Stage 9: Add buttons that change the quantity (and total in the DOM)
- Stage 10: Add color picker
- Stage 12: Add ref
- Stage 12: Add computed property