Intermediate 60-minute hands-on

AI-generated appendix

This appendix was drafted with GPT-5.5 from the original chibivue book content. Treat this route as a guided learning path; the original chapters and implementation code remain the source of truth.

This route is for readers who already know Vue, TypeScript, or framework internals. Instead of following the book from the first render, it follows the update path: state changes, work is scheduled, components rerender, and compiler output gives the renderer better instructions.

Goal

By the end, you should be able to trace this path:

state mutation -> trigger -> scheduler -> component update -> patch -> DOM operation

You should also know where compiler transforms fit into that runtime path.

0-6 min: choose a working snapshot

Read:

• Taking a Short Break
• Basic Virtual DOM: key Attribute and Patch Rendering

Do:

• Open an implementation snapshot around book/impls/20_basic_virtual_dom/040_scheduler or later.
• Find renderer.ts, scheduler.ts, effect.ts, and vnode.ts.

Checkpoint:

• You have the four files that explain most runtime updates.

6-18 min: renderer and keyed patching

Read:

• key Attribute and Patch Rendering
• Bit-Level Representation of VNodes
• Patch for Unhandled Props

Do:

• Find the branch that decides whether a VNode is an element or a component.
• Find the keyed children patch function.
• Find where props are patched after an update.

Checkpoint:

• You can explain which parts of a VNode help the renderer choose a fast path.

18-30 min: scheduler and reactivity

Read:

• Scheduler
• Reactivity Optimization
• computed / watch API
• Effect Cleanup and Effect Scope

Do:

• Find where trigger gathers effects.
• Find where component updates are queued instead of run immediately.
• Find where duplicate jobs are avoided.
• Inspect how computed or watch changes the timing of an effect.

Checkpoint:

• You can distinguish "something changed" from "the DOM was updated." The scheduler sits between those events.

30-42 min: component update surface

Read:

• Lifecycle Hooks
• Provide/Inject
• Component Proxies and setupContext
• Slots

Do:

• Find the component instance shape.
• Find how setup results are exposed to render.
• Find where lifecycle hooks are called during mount or update.
• Find how slots are normalized before rendering.

Checkpoint:

• You can describe the component instance as the place where runtime state, props, setup state, and render context meet.

42-56 min: compiler as runtime preparation

Read:

• Refactoring Implementation of Transformer for Codegen
• Implementing Directives (v-bind)
• Eval expression in template
• Supporting v-on
• v-if and Structural Directives
• Support for v-for

Do:

• Trace one directive from AST node to generated render code.
• Identify where expressions are prefixed or evaluated against render context.
• Compare v-if and v-for: one changes branches, the other changes list shape.

Checkpoint:

• You can explain that compiler transforms produce the VNode calls the renderer later patches.

56-60 min: pick the next deep dive

Choose one:

• Runtime-heavy: continue with Static Hoisting, Patch Flags, and Tree Flattening.
• Compiler-heavy: continue with Basic SFC Compiler.
• Ecosystem-heavy: continue with Router, Store, and Language Tools.