Як компонент дізнається, що стан змінився?

VueMiddle~2 хв читання

Vue «підписує» компонент на дані, якими він користується. При їх зміні компонент повідомляється і оновлюється.

Давай розберемо детально, але простими словами.

1. Vue робить стан реактивним

Коли ти створюєш змінну:

javascript

const count = ref(0)

або

javascript

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

Vue обгортає їх у Proxy (у Vue 3), який перехоплює операції:

читання значення
запис значення

Це дозволяє Vue знати:

хто використовує це значення,
коли воно змінюється.

2. Компонент «реагує» на стан, який він використовує

Коли компонент читає значення count:

javascript

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

Vue запам'ятовує:

«Цей компонент залежить від count».

Це називається tracking dependency - відстеження залежностей.

3. Коли state змінюється - Vue отримує сигнал

Наприклад:

javascript

count.value++

Відбувається ось що:

Proxy «перехоплює» зміни.
Vue відмічає: «значення оновилося».
Vue знаходить усі ефекти та компоненти, які використовують цей стан.
Vue запускає їх перемальовування.

Це називається triggering dependency - тригер залежностей.

Весь ланцюжок виглядає так:

Компонент читає стан → Vue запам'ятовує залежність.
Стан змінюється (через .value або пряме присвоєння).
Реактивна система «тригерить» зміни.
Vue викликає оновлення компонента.
У DOM оновлюється тільки змінена частина.

Простий приклад

javascript

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

Коли ми натискаємо кнопку:

javascript

count.value++
→ Proxy фіксує зміну
→ Vue викликає оновлення
→ оновлюється тільки число в кнопці

Приклад з об'єктом

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 відстежує:

що компонент використовує user.age
що user.age змінився

→ оновлює тільки це місце в шаблоні.

Важливо: Vue не перемальовує весь компонент

Vue частково оновлює DOM:

тільки вузли, які використовують змінений стан
це робить Vue швидким

Підсумок (коротко)

Компонент дізнається про зміну стану завдяки реактивній системі Vue.

Механізм:

Компонент читає дані → Vue запам'ятовує залежності.
Дані змінюються → Proxy повідомляє Vue.
Vue оновлює тільки ті частини шаблону, які використовували змінені значення.

Vue «підписує» компонент на дані, якими він користується. При їх зміні компонент повідомляється і оновлюється. Давай розберемо детально, але простими словами.

Vue робить стан реактивним Коли ти створюєш змінну:

javascript

const count = ref(0)

або

javascript

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

Vue обгортає їх у Proxy (у Vue 3), який перехоплює операції:

читання значення
запис значення Це дозволяє Vue знати:
хто використовує це значення,
коли воно змінюється.

Компонент «реагує» на стан, який він використовує Коли компонент читає значення count:

javascript

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

Vue запам'ятовує:

«Цей компонент залежить від count». Це називається tracking dependency - відстеження залежностей.

Коли state змінюється - Vue отримує сигнал Наприклад:

javascript

count.value++

Відбувається ось що:

Proxy «перехоплює» зміни.
Vue відмічає: «значення оновилося».
Vue знаходить усі ефекти та компоненти, які використовують цей стан.
Vue запускає їх перемальовування. Це називається triggering dependency - тригер залежностей.

Весь ланцюжок виглядає так:

Компонент читає стан → Vue запам'ятовує залежність.
Стан змінюється (через .value або пряме присвоєння).
Реактивна система «тригерить» зміни.
Vue викликає оновлення компонента.
У DOM оновлюється тільки змінена частина.

Простий приклад

javascript

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

Коли ми натискаємо кнопку:

javascript

count.value++
→ Proxy фіксує зміну
→ Vue викликає оновлення
→ оновлюється тільки число в кнопці

Приклад з об'єктом

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 відстежує:

що компонент використовує user.age
що user.age змінився → оновлює тільки це місце в шаблоні.

Важливо: Vue не перемальовує весь компонент Vue частково оновлює DOM:

тільки вузли, які використовують змінений стан
це робить Vue швидким

Підсумок (коротко) Компонент дізнається про зміну стану завдяки реактивній системі Vue. Механізм:

Компонент читає дані → Vue запам'ятовує залежності.
Дані змінюються → Proxy повідомляє Vue.
Vue оновлює тільки ті частини шаблону, які використовували змінені значення.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.