Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке односпрямований потік даних?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Односпрямований потік даних (one-way data flow)** - принцип, за яким дані рухаються тільки в одному напрямку: від батька до дочірнього компонента через props, а зміни піднімаються назад через події (`emit`). **Ключове:** дочірній компонент не може напряму змінити дані батька, що робить архітектуру передбачуваною і контрольованою.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Односпрямований потік даних (one-way data flow)** - це принцип, за яким дані в застосунку **рухаються тільки в одному напрямку**: від **батька -> до дочірнього компонента**. Саме так працює Vue (як і React). Простіше кажучи: > **Дані передаються згори вниз через props, а зміни піднімаються знизу вгору через події (**`emit`**).** > **Компонент-нащадок не може напряму змінити дані батька.** Це робить архітектуру передбачуваною і контрольованою. --- ## Як виглядає односпрямований потік даних у Vue? ### 1. Дані йдуть **згори вниз** -> через **props** Батько: ```vue <Child :count="counter" /> ``` Дочірній отримує: ```js props: ['count'] ``` --- ### 2. Зміни йдуть **знизу вгору** -> через **emit** Дочірній компонент повідомляє батька: ```js 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" ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.