单向数据流

Vue/React/Flutter 都适用

什么是单向数据流

数据只能从父 → 子 单向传递，子组件不能直接修改父组件数据 ，只能触发事件让父自己改，数据流向单一、可追溯。

优点

1. 逻辑清晰、流向可追踪

   数据只有一条路走，父传子、子不直接改源数据，出问题容易定位，不用到处找是谁改了数据。

2. 状态可预测、不容易乱

   不会出现多组件随意篡改同一数据源的情况，状态变化可控，不会莫名Bug、数据错乱。

3. 便于调试、维护好

   数据变化有固定入口，配合开发者工具，能清晰看到数据流转和变更来源。

4. 组件解耦、复用性强

   子组件只负责接收数据、派发事件，不依赖父组件内部逻辑，可跨页面复用。

5. 适合大型项目、团队协作

   统一数据规范，每个人写组件都遵守同一种流向逻辑，代码风格统一、好维护。

6. 天然适配状态管理

   Vuex/Pinia、Redux 都是基于单向数据流思想，全局状态统一管理更优雅。

---

三、缺点

1. 小型项目略显繁琐

   简单页面也要父传子props、子触发事件，写模板、事件回调多了，不如双向绑定省事。

2. 层级深时传值麻烦

   多层父子嵌套，要一层层透传 props（prop drilling），代码冗余、啰嗦。

3. 表单场景写起来啰嗦

   表单双向绑定习惯了，单向要手动绑定value、监听change，样板代码变多。

4. 新手上手有学习成本

   习惯了双向绑定的人，要适应不能直接改props的规则，容易写错改数据。

总结

• 适合：中大型项目、复杂状态、多人协作 → 稳、好维护、少诡异Bug。
• 不适合：简单小页面、简单表单 → 写起来啰嗦、冗余代码多。

单向数据流 vs 双向数据流 超清晰对比表

对比维度	单向数据流（React/Vue 规范）	双向数据流（Vue v-model、传统MVVM）
数据流向	父→子 单向，子不能直接改源数据	视图↔数据 双向互通，视图改自动同步数据
数据修改方式	子触发事件 → 父内部修改状态	视图直接修改，自动同步到数据源
可预测性	高，变化来源可追溯，不乱改	低，多处可隐性改数据，容易找不到修改源头
调试难度	容易，流向固定，好定位Bug	较难，数据莫名变更，溯源麻烦
组件耦合度	低，父子解耦，复用性强	偏高，视图和数据强绑定
适用项目规模	中大型项目、复杂状态、团队协作	小型项目、简单表单、快速开发
代码量	样板代码多（props + 事件）	代码简洁，少写模板逻辑
典型代表	React、Vue 原生Props、Redux/Pinia	Vue v-model、小程序双向绑定、Angular
层级传值	深层嵌套容易产生 Prop钻取 问题	深层绑定相对省事
副作用风险	低，状态变更可控	高，不经意操作就改了全局数据
学习成本	偏高，要遵守不能直接改props规则	低，上手简单，开箱即用

Vue 其实是两者结合 ：Props 遵循单向数据流 ，v-model 是语法糖，底层还是单向绑定 + 事件更新模拟出的双向。