Що таке двостороннє прив'язування даних?

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

Двостороннє прив'язування даних (two-way data binding) - це механізм, за якого дані в моделі та відображення в інтерфейсі автоматично синхронізуються між собою.

Простіше кажучи:

Якщо користувач змінює значення в UI -> змінюються дані в компоненті. Якщо дані в компоненті змінюються -> UI оновлюється автоматично.

У Vue цей механізм реалізований через директиву v-model.

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

html

<input v-model="name">
<p>{{ name }}</p>

Якщо користувач вводить текст:

name = "Alex"

Якщо ти змінюєш змінну в коді:

this.name = "John"

значення в input теж оновиться.

Це і є двостороннє прив'язування.

Як це працює під капотом

Vue перетворює:

html

<input v-model="name">

на два механізми:

Одностороннє прив'язування (model -> view):

html

:value="name"

Зворотне прив'язування (view -> model):

html

@input="name = $event.target.value"

Vue автоматично об'єднує це у зручний синтаксис.

Що дає двостороннє прив'язування?

Економить код

Тобі не потрібно писати вручну обробники input, change, keyup.

Спрощує форми

Особливо багатоелементні, як-от валідації.

Синхронний UI

UI завжди відображає актуальні дані.

Двостороннє прив'язування в компонентах (Vue 3)

html

<MyInput v-model="value" />

Працює через:

проп: modelValue
подію: update:modelValue

Компонент:

vue

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>

Відмінність від одностороннього прив'язування

Вид прив'язування	Що робить
одностороннє (one-way)	Оновлює лише UI при зміні даних
двостороннє (two-way)	UI і дані оновлюють одне одного

Приклад одностороннього:

html

<input :value="name">

UI не можна використовувати для зміни моделі.

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

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

Premium

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