Suggest an edit

Improve this article

Refine the answer for “How does a component know that state has changed?”. 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)

**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)
```

```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.

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

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.