Value of a property in data

VueJunior~1 min read

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:

captures the change through the reactive system,
notifies all dependencies,
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

Short Answer

Interview ready

Premium

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