共计 1814 个字符，预计需要花费 5 分钟才能阅读完成。
序言
在前端三大支流的框架中，咱们可能会常常听到 React 是单向数据流，采纳单向数据绑定，而 Vue 2.x 也是单向数据流，但同时反对单向数据绑定和双向数据绑定，而 Angular 和 AngularJS 又有所不同，到底数据绑定与数据流之间有什么关联？单向数据绑定就等价于单向数据流吗？反对双向数据绑定就肯定是双向数据流吗？这篇文章将理清在前端三大框架中数据绑定与数据流之间的关联与区别。
注：若以下文章中没有特地指明 Vue 的版本，默认代表 Vue 2.x。Angular 个别意义上是指 Angular 2 及以上版本，而 AngularJS 专指 Angular 的所有 1.x 版本。
单向数据绑定 vs 双向数据绑定
所谓数据绑定，就是指
View层和Model层之间的映射关系。
单向数据绑定：Model的更新会触发 View 的更新，而 View 的更新不会触发 Model 的更新，它们的作用是单向的。
双向数据绑定：Model的更新会触发 View 的更新，View的更新也会触发 Model 的更新，它们的作用是互相的。
React 采纳单向数据绑定
当用户拜访 View 时，通过触发 Events 进行交互，而在相应 Event Handlers 中，会触发对应的 Actions，而 Actions 通过调用 setState 办法对View 的State 进行更新，State更新后会触发 View 的从新渲染。
能够看出，在 React 中，View 层是不能间接批改 State，必须通过相应的 Actions 来进行操作。
单向数绑定的优缺点：
长处：所有状态变动都能够被记录、跟踪，状态变动通过手动调用触发，源头易追溯。
毛病：会有很多相似的样板代码，代码量会相应的回升。
Vue 反对单向数据绑定和双向数据绑定
- 单向数据绑定：应用
v-bind属性绑定、v-on事件绑定或插值模式{{data}}。 - 双向数据绑定：应用
v-model指令，用户对View的更改会间接同步到Model。
Vue 的双向数据绑定就是指应用 v-model 指令进行数据绑定，而 v-model 实质上是 v-bind 和v-on相组合的语法糖，是框架主动帮咱们实现了更新事件。换句话说，咱们齐全能够采取单向绑定，本人实现相似的双向数据绑定。
双向数据绑定的优缺点：
长处：在操作表单时应用 v-model 不便简略，能够省略繁琐或反复的 onChange 事件去解决每个表单数据的变动（缩小代码量）。
毛病：属于暗箱操作，无奈很好的追踪双向绑定的数据的变动。
Angular 反对单向数据绑定和双向数据绑定
- 单向数据绑定：应用
[x]属性绑定、(x)事件绑定或插值模式{{data}}。 - 双向数据绑定：应用
[(x)]语法，用户对View的更改会间接同步到Model。
除了语法上有所不同，Angular 双向数据绑定与 Vue 相似，也是语法糖，[(x)] 语法联合了属性绑定[x] 和事件绑定 (x)。
AngularJS 反对单向数据绑定和双向数据绑定
- 单向数据绑定：应用
ng-bind指令或插值模式{{data}}。 - 双向数据绑定：应用
ng-model指令，用户对View的更改会间接同步到Model。
AngularJS 的双向数据绑定实现原理与 Angular 齐全不同，其实现原理能够参考这篇文章。
单向数据流 vs 双向数据流
所谓数据流，就是指的是组件之间的数据流动。
React、Vue 以及 Angular 都只是单向数据流
尽管 Vue 和 Angular 有双向数据绑定，但 Vue 和 Angualr 父子组件之间数据传递，依然遵循单向数据流，即父组件能够向子组件传递props，然而子组件不能批改父组件传递来的props，子组件只能通过事件告诉父组件进行数据更改。如下图所示：
长处：因为组件数据传递只有惟一的入口和进口，使得程序更直观、更容易了解，有利于程序的可维护性。
AngularJS 反对双向数据流
所谓双向数据流，就是指在子组件中能够间接更新父组件的数据。
毛病：因为组件数据变动的起源入口变得可能不止一个，如果不足相应的“治理”伎俩，容易将数据流转方向弄得错乱。同时也会减少了出错时 debug 的难度。
数据流与数据绑定
严格来说，数据流和数据绑定是两个概念，并不是同一个货色。单向数据流也能够反对双向数据绑定，双向数据流也能够反对单向数据绑定。
简略总结一下前端三大框架的数据流与数据绑定的区别：
参考
Vue 的单向数据流和双向数据绑定不是抵触的吗？
单向数据绑定和双向数据绑定的优缺点
前端三大框架 vue，angular，react 大杂烩
