Vue/React/Flutter 都适用
什么是单向数据流
数据只能从父 → 子 单向传递，子组件不能直接修改父组件数据 ，只能触发事件让父自己改，数据流向单一、可追溯。
优点
-
逻辑清晰、流向可追踪
数据只有一条路走，父传子、子不直接改源数据，出问题容易定位，不用到处找是谁改了数据。
-
状态可预测、不容易乱
不会出现多组件随意篡改同一数据源的情况，状态变化可控，不会莫名Bug、数据错乱。
-
便于调试、维护好
数据变化有固定入口，配合开发者工具，能清晰看到数据流转和变更来源。
-
组件解耦、复用性强
子组件只负责接收数据、派发事件，不依赖父组件内部逻辑，可跨页面复用。
-
适合大型项目、团队协作
统一数据规范，每个人写组件都遵守同一种流向逻辑，代码风格统一、好维护。
-
天然适配状态管理
Vuex/Pinia、Redux 都是基于单向数据流思想，全局状态统一管理更优雅。
三、缺点
-
小型项目略显繁琐
简单页面也要父传子props、子触发事件，写模板、事件回调多了，不如双向绑定省事。
-
层级深时传值麻烦
多层父子嵌套，要一层层透传 props（prop drilling），代码冗余、啰嗦。
-
表单场景写起来啰嗦
表单双向绑定习惯了，单向要手动绑定value、监听change，样板代码变多。
-
新手上手有学习成本
习惯了双向绑定的人，要适应不能直接改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 是语法糖，底层还是单向绑定 + 事件更新模拟出的双向。