Що таке односпрямований потік даних?

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

Односпрямований потік даних (one-way data flow) - це принцип, за яким дані в застосунку рухаються тільки в одному напрямку: від батька -> до дочірнього компонента.

Саме так працює Vue (як і React).

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

Дані передаються згори вниз через props, а зміни піднімаються знизу вгору через події (emit). Компонент-нащадок не може напряму змінити дані батька.

Це робить архітектуру передбачуваною і контрольованою.

Як виглядає односпрямований потік даних у Vue?

1. Дані йдуть згори вниз -> через props

Батько:

vue

<Child :count="counter" />

Дочірній отримує:

props: ['count']

2. Зміни йдуть знизу вгору -> через emit

Дочірній компонент повідомляє батька:

this.$emit('increment')

Батько оновлює дані:

vue

<Child @increment="counter++" />

Чому props не можна змінювати в дочірньому компоненті?

Тому що це порушить односпрямований потік даних.

Vue спеціально робить props readonly, щоб:

запобігти неконтрольованим змінам
уникнути непередбачуваної поведінки
зберегти архітектурну чистоту

Навіщо потрібен односпрямований потік даних?

1. Передбачуваність

Можна легко зрозуміти, звідки прийшло будь-яке значення.

2. Простота налагодження

Якщо дані змінилися - це відбулося в батькові.

3. Спрощена архітектура

Компоненти не можуть випадково вплинути одне на одного.

4. Уникнення «магії», як у двосторонній прив'язці

(у великих застосунках двостороння прив'язка спричиняє плутанину)

5. Менше багів

Особливо у великому SPA.

Приклад односпрямованого потоку (візуально)

Parent data  ->  props  ->  Child
Parent  <-  emit event  <-  Child

Тільки так, і ніяк інакше.

Де порушується односпрямований потік?

коли дитина намагається змінити props
при використанні глобальних змінних напряму
при непотрібній двосторонній прив'язці компонентів

Vue буде попереджати:

[Vue warn]: Attempting to mutate prop "count"

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

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

Premium

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