Suggest an edit

Improve this article

Refine the answer for “How does Vue update the DOM when data changes?”. 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)

### How Vue updates the DOM when data changes

Vue uses a **reactive system** and a **Virtual DOM** to automatically and efficiently update the user interface when data changes.

---

## 1. Data reactivity

When you create state (for example, in `data()` or with `ref()/reactive()` in the Composition API), Vue **wraps the object in a Proxy**.
This Proxy intercepts property read and write operations.

```javascript
const state = reactive({
  count: 0
})
```

If you then do:

```javascript
state.count++
```

Vue "sees" the change and schedules an update for all components that depend on `state.count`.

---

## 2. Dependency tracking

Vue tracks **which data is used while rendering a component**.
When a component is first rendered, Vue registers all reactive properties that were read inside the template or the `render()` function.

Example:

```javascript
<template>
  <p>Counter: {{ count }}</p>
</template>

When Vue renders the template, it "remembers" that the component depends on `count`.
Now, when `count.value` changes, Vue **re-renders only this component**.

---

## 3. Virtual DOM

Vue does not modify the DOM directly.
Instead:

1. It generates a **virtual tree of elements (Virtual DOM)** - a lightweight JS representation of the current interface.
2. When data changes, Vue creates a **new virtual tree**.
3. Then Vue **compares (diffs)** the new tree against the old one.
4. And updates the real DOM with only the **minimally necessary changes**.

This makes updates **very fast and efficient**.

---

## 4. Batching (grouping updates)

Vue does not update the DOM instantly on every data change.
Changes are collected and executed **asynchronously** on the next "tick" (event loop iteration), to avoid unnecessary re-renders.

```javascript
count.value++
count.value++

console.log('DOM not updated yet')
await nextTick()
console.log('DOM already updated')
```

---

## 5. Minimal DOM updates

Thanks to the Virtual DOM and dependency tracking, Vue:

- Does not re-render the whole component;
- Does not touch other independent parts of the page;
- Changes **only what** actually changed.

---

### Summary

> Vue updates the DOM **reactively and efficiently**:
>
> - Tracks which data is used where;
> - Recomputes only the necessary components when data changes;
> - Uses the Virtual DOM for minimal changes to the real DOM;
> - Performs updates asynchronously for optimal performance.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.