vuejs /

Vue.js

Live map
View repository
Snapshotmain · a2b40db

Templates compile into render functions whose reactive dependencies schedule precise renderer updates.

Click a building or route
Choose a path

Compile a template, create its component instance, and materialize its virtual nodes in the DOM.

System map7 components · 8 connections
130%
Vue: reactive state becomes DOM work architectureStart at the DOM entry, compare the compile-time path across the top with the reactive update loop below.root component and con…component render funct…element, text, propert…DOM transforms and tem…generated render codeDOM runtimeComponentinstanceVirtual DOMrendererReactiveeffectJob schedulerDOM compilerCore compiler
Connections
BuildingsEntryServiceComputeStorageRuntimeToolingExternal

Terms, in plain English

Render effectA reactive computation that renders one component and reruns when its dependencies change.

How to study this repo

  1. 1
    Mount the root

    Trace createApp from the DOM wrapper into component creation and renderer mount.

  2. 2
    Compile one template

    Follow DOM transforms through core compilation into a component render function.

  3. 3
    Change one ref

    Track a reactive trigger through scheduling and the renderer patch.