Suggest an edit

Improve this article

Refine the answer for “What is the "reactivity tree"?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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>

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:

| Advantage | Explanation |
|---|---|
| **Precise granularity** | Only what actually depends on the changed property gets updated |
| **High performance** | There are no "dirty checks" (unlike AngularJS) |
| **Simple composition** | Any `computed` and `watch` are built on top of the same dependencies |
| **Optimal re-render** | Vue 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts527 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.