В Vue однонаправленный поток данных реализуется через строгую иерархию передачи данных от родительского компонента к дочернему, при которой дочерний компонент не может напрямую изменить данные, полученные от родителя. Это обеспечивает предсказуемость и контроль за изменениями данных, особенно в больших приложениях.

Принцип однонаправленного потока данных

В Vue данные передаются от родителя к потомку с помощью props (свойств). Родитель "владеет" данными, а дочерний компонент получает их в виде props и использует только для отображения или вычислений. Если дочерний компонент хочет изменить данные, он должен сообщить родителю об этом через события.

Схема:

Родитель → \[props\] → Дочерний
Родитель ← \[custom event\] ← Дочерний

Пример передачи данных от родителя к дочернему компоненту

Родительский компонент (App.vue):

<template>
<div>
<h1>{{ title }}</h1>
<ChildComponent :message="title" />
</div>
</template>
<script>
import ChildComponent from './components/ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
title: 'Привет из родителя'
}
}
}
</script>

Дочерний компонент (ChildComponent.vue):

<template>
<p>Сообщение от родителя: {{ message }}</p>
</template>
<script>
export default {
props: {
message: String
}
}
</script>

message в дочернем компоненте — это prop, переданный от родителя. Дочерний компонент его получает, но не имеет права изменять напрямую.

Попытка изменить prop внутри дочернего компонента

Vue покажет предупреждение в консоли, если вы попытаетесь изменить prop:

mounted() {
this.message = 'Новое значение' // ⚠ ошибка! props изменять нельзя!
}

Чтобы изменить значение в родителе, дочерний компонент должен сгенерировать событие.

Обратная связь: от дочернего компонента к родителю

Для изменения состояния в родителе дочерний компонент может вызвать событие, которое родитель "слушает".

ChildComponent.vue:

<template>
<button @click="notifyParent">Изменить</button>
</template>
<script>
export default {
methods: {
notifyParent() {
this.$emit('change-title', 'Новое сообщение от ребёнка')
}
}
}
</script>

App.vue:

<template>
<div>
<h1>{{ title }}</h1>
<ChildComponent :message="title" @change-title="title = $event" />
</div>
</template>

Теперь при клике на кнопку дочерний компонент инициирует событие change-title, а родитель обновляет переменную title.

Однонаправленный поток и Vue Devtools

Vue Devtools чётко отображает однонаправленный поток:

• Data — данные компонента.

• Props — данные, полученные от родителя.

• Events — события, сгенерированные компонентом.

Таким образом, легко отследить источник данных и их движение по иерархии компонентов.

Реактивность и однонаправленность

Хотя props реактивны — т.е. при изменении родительского значения они обновятся в дочернем — дочерний компонент всё равно не может их напрямую изменять. Vue защищает это поведение:

• **Если родитель изменит prop → дочерний автоматически увидит обновление.
  **
• **Если дочерний попытается изменить prop → будет предупреждение.
  **

Почему это важно

Однонаправленный поток данных предотвращает:

• Неожиданные побочные эффекты от изменений данных.

• Зависимости между компонентами, делающие код трудно масштабируемым.

• Сложности в отладке, особенно при вложенных компонентах.

Этот подход особенно хорошо сочетается с Vuex или Composition API в крупных приложениях, где важно централизованное и предсказуемое управление состоянием.

Частые ошибки и антипаттерны

Мутировать prop внутри дочернего компонента:

props: \['count'\],
mounted() {
this.count++ // ⚠ нельзя
}

Использовать локальную копию для мутации:

props: \['count'\],
data() {
return {
localCount: this.count
}
},
methods: {
increment() {
this.localCount++
this.$emit('update:count', this.localCount)
}
}

Это поведение часто используется с v-model в компонентах.

v-model и поток данных

Когда ты используешь v-model на пользовательском компоненте, это на самом деле просто синтаксический сахар над :value и @input.

<MyInput v-model="username" />

Равнозначно:

<MyInput :value="username" @input="username = $event" />

Компонент MyInput должен сам вызывать this.$emit('input', newValue), чтобы обновить значение в родителе. Это также вписывается в концепцию однонаправленного потока: родитель владеет данными, ребёнок сообщает об изменении.

Итоговая концепция

• Все данные передаются сверху вниз (от родителя к потомку) через props.

• Дочерний компонент должен сообщать о действиях или изменениях через события.

• Компоненты не должны изменять props напрямую.

• Это делает структуру данных прозрачной, реактивной и управляемой.