Зв'язок даних та UI

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

У Vue.js шаблон (<template>) реактивно пов'язаний з даними компонента. Це означає: коли ви змінюєте значення в data(), ref() або reactive(), інтерфейс автоматично оновлюється без ручного втручання в DOM.

1. Принцип роботи зв'язку даних

Vue реалізує механізм двостороннього зв'язування даних (data binding):

З коду -> у шаблон: дані з компонента автоматично відображаються в DOM.
З шаблону -> у код (наприклад, при введенні тексту в input): зміни користувача можуть автоматично оновлювати дані в компоненті (через v-model).

2. Одностороннiй зв'язок (Data -> Template)

Приклад:

javascript

<template>
  <h1>Привіт, {{ name }}!</h1>
</template>

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

const name = ref('Oleh')
</script>

Тут:

{{ name }} - інтерполяція (підстановка даних у шаблон);
ref('Oleh') робить name реактивним;
якщо змінити name.value = 'Bob', Vue сам оновить текст на сторінці.

3. Прив'язка атрибутів (`v-bind`)

Для динамічної зміни HTML-атрибутів використовується директива v-bind: (або коротко :).

javascript

<template>
  <img :src="avatarUrl" :alt="userName" />
</template>

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

const avatarUrl = ref('/images/user.png')
const userName = ref('Oleh')
</script>

v-bind зв'язує атрибут зі значенням змінної і оновлює DOM при змінах.

4. Обробка подій (`v-on`)

Для зв'язку даних і дій використовується директива v-on: (або коротко @).

javascript

<template>
  <button @click="increment">Лічильник: {{ count }}</button>
</template>

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

const count = ref(0)
function increment() {
  count.value++
}
</script>

Коли користувач клікає по кнопці, викликається функція, яка змінює count, а Vue автоматично оновлює текст у шаблоні.

5. Двостороннiй зв'язок (`v-model`)

Якщо потрібно, щоб зміни даних та інтерфейсу відбувалися в обидва боки (наприклад, при введенні тексту), використовується v-model.

javascript

<template>
  <input v-model="message" placeholder="Введіть текст" />
  <p>Ви ввели: {{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('')
</script>

При зміні message -> оновлюється input. При введенні тексту в input -> оновлюється message.

6. Що робить Vue "під капотом"

Vue створює реактивні посилання на дані (ref, reactive).
Шаблон компілюється у функцію рендера.
При зміні даних Vue:
1. Позначає компонент як "брудний" (потребує оновлення),
2. Перераховує шаблон через Virtual DOM,
3. Знаходить відмінності і точково оновлює реальний DOM.

Підсумок

У Vue.js шаблон і дані компонента пов'язані реактивно:

через інтерполяції ({{ }}) для виведення значень,

v-bind для динамічних атрибутів,

v-on для подій,

v-model для двостороннього зв'язування.

При зміні стану Vue автоматично оновлює інтерфейс, без ручних маніпуляцій з DOM.

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

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

Premium

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