Skip to main content

How does a component know that state has changed?

VueMiddle~3 min read
Suggest an edit

Vue "subscribes" a component to the data it uses. When that data changes, the component is notified and updates.

Let's break this down in detail, but in simple terms.

1. Vue makes state reactive

When you create a variable:

javascript
const count = ref(0)

or

javascript
const user = reactive({ name: 'Tim' })

Vue wraps them in a Proxy (in Vue 3), which intercepts operations:

  • reading the value
  • writing the value

This lets Vue know:

  • who is using this value,
  • when it changes.

2. A component "reacts" to the state it uses

When a component reads the value of count:

javascript
<p>{{ count }}</p>

Vue remembers:

"This component depends on count."

This is called tracking dependency.

3. When the state changes, Vue receives a signal

For example:

javascript
count.value++

Here's what happens:

  1. The Proxy "intercepts" the change.
  2. Vue marks: "the value was updated."
  3. Vue finds all effects and components that use this state.
  4. Vue triggers their re-render.

This is called triggering dependency.

The whole chain looks like this:

  1. The component reads the state → Vue remembers the dependency.
  2. The state changes (via .value or a direct assignment).
  3. The reactive system "triggers" the change.
  4. Vue calls an update of the component.
  5. Only the changed piece of the DOM is updated.

A simple example

javascript
<script setup> import { ref } from 'vue' const count = ref(0) </script> <template> <button @click="count++">{{ count }}</button> </template>

When we click the button:

javascript
count.value++ → the Proxy records the change → Vue triggers an update → only the number in the button is updated

An example with an object

javascript
<script setup> import { reactive } from 'vue' const user = reactive({ name: "Tim", age: 25 }) </script> <template> <p>{{ user.age }}</p> <button @click="user.age++">+</button> </template>

Vue tracks:

  • that the component uses user.age
  • that user.age changed

→ updates only this spot in the template.

Important: Vue does not re-render the whole component

Vue updates the DOM partially:

  • only the nodes that use the changed state
  • this is what makes Vue fast

Summary (short)

A component finds out about a state change thanks to Vue's reactive system.

Mechanism:

  1. The component reads data → Vue remembers the dependencies.
  2. The data changes → the Proxy tells Vue.
  3. Vue updates only the parts of the template that used the changed values.

Vue "subscribes" a component to the data it uses. When that data changes, the component is notified and updates. Let's break this down in detail, but in simple terms.

  1. Vue makes state reactive When you create a variable:
javascript
const count = ref(0)

or

javascript
const user = reactive({ name: 'Tim' })

Vue wraps them in a Proxy (in Vue 3), which intercepts operations:

  • reading the value
  • writing the value This lets Vue know:
  • who is using this value,
  • when it changes.
  1. A component "reacts" to the state it uses When a component reads the value of count:
javascript
<p>{{ count }}</p>

Vue remembers:

"This component depends on count." This is called tracking dependency.

  1. When the state changes, Vue receives a signal For example:
javascript
count.value++

Here's what happens:

  1. The Proxy "intercepts" the change.
  2. Vue marks: "the value was updated."
  3. Vue finds all effects and components that use this state.
  4. Vue triggers their re-render. This is called triggering dependency.

The whole chain looks like this:

  1. The component reads the state → Vue remembers the dependency.
  2. The state changes (via .value or a direct assignment).
  3. The reactive system "triggers" the change.
  4. Vue calls an update of the component.
  5. Only the changed piece of the DOM is updated.

A simple example

javascript
<script setup> import { ref } from 'vue' const count = ref(0) </script> <template> <button @click="count++">{{ count }}</button> </template>

When we click the button:

javascript
count.value++ → the Proxy records the change → Vue triggers an update → only the number in the button is updated

An example with an object

javascript
<script setup> import { reactive } from 'vue' const user = reactive({ name: "Tim", age: 25 }) </script> <template> <p>{{ user.age }}</p> <button @click="user.age++">+</button> </template>

Vue tracks:

  • that the component uses user.age
  • that user.age changed → updates only this spot in the template.

Important: Vue does not re-render the whole component Vue updates the DOM partially:

  • only the nodes that use the changed state
  • this is what makes Vue fast

Summary (short) A component finds out about a state change thanks to Vue's reactive system. Mechanism:

  1. The component reads data → Vue remembers the dependencies.
  2. The data changes → the Proxy tells Vue.
  3. Vue updates only the parts of the template that used the changed values.

Short Answer

Interview ready
Premium

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

Suggest an edit