Skip to main content

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

VueJunior~1 хв читання
Запропонувати правку

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

Як це працює у Vue.js

У Vue.js:

  • Батьківський компонент передає дані дочірньому через props.
  • Дочірній компонент не може напряму змінювати prop, який він отримав - він може лише використовувати його для відображення або скопіювати в локальний стан.
  • Якщо батько змінює дані, Vue автоматично оновить дочірній компонент.

Приклад:

javascript
<!-- Батько --> <template> <UserCard :name="userName" /> </template> <script setup> import { ref } from 'vue' import UserCard from './UserCard.vue' const userName = ref('Maria') </script>
javascript
<!-- Дочірній компонент --> <template> <p>Привіт, {{ name }}!</p> </template> <script setup> defineProps({ name: String }) </script>

Якщо userName зміниться у батька, оновиться і відображення в UserCard.

Але якщо всередині UserCard спробувати змінити name, Vue видасть попередження:

"Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders."

Чому важливий односпрямований рух даних

  1. Передбачуваність: Потік даних завжди рухається згори вниз, тому простіше зрозуміти, де і чому щось змінилося.
  2. Прозорість: Батько керує станом, дочірні компоненти - лише відображають або повідомляють про події.
  3. Спрощений потік налагодження: Коли UI не відповідає даним, легко знайти джерело помилки: зміни йдуть тільки в одному напрямку.

Як дочірній компонент повідомляє батька про зміни

Якщо дочірній компонент хоче змінити стан, що належить батьку, він:

  • не змінює його напряму, а
  • надсилає подію вгору через emit.
javascript
<!-- Дочірній --> <template> <button @click="$emit('update-name', 'Oleh')">Змінити ім'я</button> </template>
javascript
<!-- Батько --> <UserCard :name="userName" @update-name="userName = $event" />

Таким чином, дані течуть вниз, а події - вгору. Це робить потік даних односпрямованим і контрольованим.

Підсумок

Односпрямований потік даних у Vue.js означає, що:

  • дані передаються вниз (props) - від батька до дочірнього компонента,
  • а зміни ініціюються вгору (events) - через події.

Це гарантує передбачуваність, чисту архітектуру та контрольоване оновлення стану.

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

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

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

Запропонувати правку