Vue
UI frameworks · 4 stages · 28 units in the full series · 28 published in English
Series goal
Use the Composition API to distinguish state, derived values, and side effects, and manage the lifetimes of notes and Canvas.
Prerequisites
JavaScript and HTML; state concepts for comparison with React
Practice approach and scope
Learning units are not calendar days. Read the explanation and tasks, check the completion criteria, then move on. Use each example as a starting point: change variables and observe the results. Built-in examples and tasks requiring a separate environment are identified separately. Opening an example does not complete a unit.
Existing unit IDs and notes are preserved. The original 01, 02, and 03 examples occupy positions 1, 14, and 28 in the expanded sequence, so the number in the address may differ from the learning order.
Only published English units are linked below. The full series has 28 units.
Learning path
Stage 1 · Reactive Data and Templates
- 01. Reactivity and Templates — Editable example
- 02. SFCs and Template Binding — Editable example
- 03. reactive and Preserving References — Editable example
- 04. Pure Computation with computed — Editable example
- 05. List Keys and Conditional Lifetimes — Editable example
- 06. Events and Input Conversion — Editable example
- 07. Expressing State with Classes and Styles — Editable example
Stage 2 · Component Contracts and Watching
- 08. The One-Way Contract of props — Editable example
- 09. Communicating Change Intent with emits — Editable example
- 10. Component v-model — Editable example
- 11. Composing Screens with Slots — Editable example
- 12. watch Sources and Timing — Editable example
- 13. Watcher Cleanup and Out-of-Order Requests — Editable example
- 14. Component Contracts and Watching — Editable example
Stage 3 · Composables and Store Lifetimes
- 15. Template Refs and nextTick — Editable example
- 16. Composable Lifetimes — Editable example
- 17. provide and inject — Editable example
- 18. Shared Store Scope — Editable example
- 19. Restoring Saved Data and Validation — Editable example
- 20. Async Components and Loading UI — Editable example
- 21. KeepAlive and Pausing — Editable example
Stage 4 · Canvas Integration and Update Verification
- 22. Creating and Releasing Canvas Resources — Editable example
- 23. Separating Frame Values from UI Values — Editable example
- 24. Shallow Reactivity and External Objects — Editable example
- 25. Observing Vue Performance — Editable example
- 26. Checking Behavior Regressions and Save Races — Editable example
- 27. Composition API Integration Review — Editable example
- 28. Canvas Lifecycle — Editable example
Capstone project and deliverables
A Vue workspace with per-unit notes and Canvas, a props/emits contract table, a React lifetime comparison, and resource audit records.
Keep the implementation, run instructions, baseline and changed conditions, failure cases, and recovery steps together. Do not report unmeasured performance or tests you have not run as results.