Skip to main content

What is the "reactivity tree"?

VueJunior~2 min read
Suggest an edit

1. What is the reactivity tree

The reactivity tree is the internal dependency structure in Vue that describes which reactive data affects which computations, effects, and components.

You can picture it as a tree, where:

  • Roots are reactive data (ref, reactive),
  • Branches are computed values (computed, watchEffect, render effect),
  • Leaves are the specific DOM nodes or components that get updated.

2. An intuitive example

Take a simple example:

javascript
<template> <p>Double: {{ double }}</p> </template> <script setup> import { ref, computed } from 'vue' const count = ref(1) const double = computed(() => count.value * 2) </script>

Here Vue builds roughly this dependency structure:

javascript
count (ref) └── double (computed) └── render effect (component)

When count changes:

  • Vue calls all the effects that depend on count - that is double.
  • Then it recomputes double.
  • Vue sees that double is used in the template - it updates the DOM.

So Vue walks the dependency tree, updating only what is actually connected.

3. How this works internally

Vue stores dependencies using these structures:

javascript
targetMap = WeakMap { target (object) → Map { key (property) → Set(effect) } }
  • Each ref or property of a reactive object (reactive) is a data node.
  • Each effect (for example a render function, computed, watchEffect) is an effect node.
  • Vue builds a "graph" or "tree" of connections: who depends on whom.

When Vue calls track(target, key) while reading a property, it adds a connection between the data node and the effect node. On a change, trigger(target, key) is called, and Vue updates only the connected effects.

4. Why it is called a "tree"

Although formally this is a dependency graph, in practice it behaves like an update tree, because the dependencies go in one direction:

javascript
reactive data → computed → watchers → render → DOM

Top levels (roots) are the data. Middle levels are computed values and effects. Bottom levels are components and the DOM.

So when one property changes, Vue "descends the tree", updating only the branches that need it.

5. Why this matters

The reactivity tree gives Vue powerful advantages:

AdvantageExplanation
Precise granularityOnly what actually depends on the changed property gets updated
High performanceThere are no "dirty checks" (unlike AngularJS)
Simple compositionAny computed and watch are built on top of the same dependencies
Optimal re-renderVue knows which components need updating and which can be skipped

6. A visual analogy

javascript
[Reactive data] / \ [Computed A] [Computed B] | \ [Watcher] [Render effect] | [DOM]

A change in the data at the root of the tree triggers a "chain reaction" across all the nodes that depend on it, but only along the relevant branch.

7. In short

The reactivity tree is an internal map of dependencies between data and effects.

It lets Vue automatically and efficiently know what needs to be recomputed and updated when reactive data changes.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit