Vue 3 Reactivity: Effect Tracking and the 'Dependency Tracking' Map

Vue tracks dependencies using a global targetMap (WeakMap) that maps objects to their properties and those properties to a set of 'Effects'.

When a reactive property is accessed in a 'Track' phase (like rendering), Vue looks at the activeEffect. It then stores this effect in a deps set inside the targetMap. The structure is WeakMap<Target, Map<Key, Set<Effect>>>. When the property is modified, Vue looks up the deps set and re-runs all the effects. Understanding this structure is key to debugging 'stale closure' issues or performance bottlenecks in massive reactive graphs.