Suggest an edit

Improve this article

Refine the answer for “Value of a property in data”. 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)

## In short

When you change a property from `data()`, Vue **automatically tracks that change** and **updates the interface (DOM)** that depends on that property.

That is, Vue:

1. captures the change through the reactive system,
2. notifies all dependencies,
3. and triggers an update of the necessary parts of the interface.

---

## In detail: the step-by-step process

Suppose you have a component:

```javascript
export default {
  data() {
    return {
      count: 0
    }
  },
  template: `<button @click="count++">{{ count }}</button>`
}
```

Now let's break down what happens on `count++`.

---

### 1. Vue makes `data()` reactive

When the component is created:

- Vue calls `data()` and gets the object `{ count: 0 }`.
- This object is wrapped in a **reactive shell** (in Vue 3, via a `Proxy`).
- Now every read or write of a property (`count`) is intercepted.

---

### 2. Rendering the template registers a dependency

When the component renders for the first time, Vue **reads** `state.count` to substitute its value into the template (`{{ count }}`).

This triggers the `get` trap on the Proxy:

```javascript
get(target, key, receiver) {
  track(target, key) // "remember" that the template depends on count
  return Reflect.get(target, key, receiver)
}
```

Now Vue knows: "If the property `count` changes, the template needs to be re-rendered."

---

### 3. When you change the value (`count++`)

Vue intercepts the write operation:

```javascript
set(target, key, value, receiver) {
  const oldValue = target[key]
  const result = Reflect.set(target, key, value, receiver)
  if (oldValue !== value) {
    trigger(target, key) // notify dependent effects
  }
  return result
}
```

---

### 4. Vue triggers a component update

The `trigger()` function finds all effects that depend on `count`
(in our case, **the component's render function**)
and **runs it again**.

Vue does not re-render the whole DOM, only **the nodes** where `{{ count }}` appears.

---

### 5. The virtual DOM updates the real DOM

The render function creates a new virtual DOM.
Vue compares the old and new trees (diffing) and updates **only the text that changed** inside the `<button>`.

This is exactly why Vue updates lightning fast, even with hundreds of reactive properties.

---

## The whole chain in one line:

`this.count++`
→ `Proxy.set()`
→ `trigger()`
→ component re-render
→ diff → patch → updated DOM

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.