Значення властивості в data

VueJunior~1 хв читання

Коротко

Коли ти змінюєш властивість із data(), Vue автоматично відстежує цю зміну і оновлює інтерфейс (DOM), який залежить від цієї властивості.

Тобто Vue:

фіксує зміну через реактивну систему,
повідомляє всі залежності,
і запускає оновлення потрібних частин інтерфейсу.

Детально: покроковий процес

Припустимо, у тебе є компонент:

javascript

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

Тепер розберемо, що відбувається при count++.

1. Vue робить `data()` реактивним

При створенні компонента:

Vue викликає data() і отримує об'єкт { count: 0 }.
Цей об'єкт обгортається в реактивну оболонку (у Vue 3 - через Proxy).
Тепер кожне читання або запис властивості (count) буде перехоплюватися.

2. При рендері шаблону реєструється залежність

Коли компонент рендериться вперше, Vue читає state.count, щоб підставити його значення в шаблон ({{ count }}).

Тоді спрацьовує пастка get у Proxy:

javascript

get(target, key, receiver) {
  track(target, key) // "запам'ятай", що шаблон залежить від count
  return Reflect.get(target, key, receiver)
}

Тепер Vue знає: «Якщо властивість count зміниться - треба перерендерити шаблон».

3. Коли ти змінюєш значення (`count++`)

Vue перехоплює операцію запису:

javascript

set(target, key, value, receiver) {
  const oldValue = target[key]
  const result = Reflect.set(target, key, value, receiver)
  if (oldValue !== value) {
    trigger(target, key) // повідомити залежні ефекти
  }
  return result
}

4. Vue викликає оновлення компонента

Функція trigger() знаходить усі ефекти, що залежать від count (у нашому випадку - функцію рендера компонента) і запускає її заново.

Vue не перемальовує весь DOM, а тільки ті вузли, де є {{ count }}.

5. Віртуальний DOM оновлює реальний DOM

Рендер-функція створює новий віртуальний DOM. Vue порівнює старе і нове дерево (diffing) і оновлює тільки текст, що змінився у <button>.

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

Весь ланцюжок в одному рядку:

this.count++ → Proxy.set() → trigger() → повторний рендер компонента → diff → patch → оновлений DOM

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

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

Premium

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