What is one-way data flow?

One-way data flow is a principle by which data in an application moves in only one direction: from the parent -> to the child component.

This is exactly how Vue works (as does React).

Put simply:

Data is passed top-down through props, and changes bubble bottom-up through events (emit). A child component cannot directly change the parent's data.

This makes the architecture predictable and controllable.

---

#What does one-way data flow look like in Vue?

#1. Data goes top-down -> through props

Parent:

The child receives:

---

#2. Changes go bottom-up -> through emit

The child component informs the parent:

The parent updates the data:

---

#Why can't props be changed in the child component?

Because it would break one-way data flow.

Vue deliberately makes props readonly to:

• prevent uncontrolled changes
• avoid unpredictable behavior
• keep the architecture clean

---

#Why is one-way data flow needed?

#1. Predictability

You can easily tell where any value came from.

#2. Easier debugging

If data changed, it happened in the parent.

#3. Simpler architecture

Components cannot accidentally affect each other.

#4. Avoiding the "magic" of two-way binding

(in large applications, two-way binding causes confusion)

#5. Fewer bugs

Especially in a large SPA.

---

#Example of one-way flow (visually)

Only this way, and no other.

---

#Where is one-way flow broken?

• when the child tries to change props
• when using global variables directly
• with unnecessary two-way binding of components

Vue will warn:

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