vue 单向数据流 & 双向绑定

在react中是单向数据绑定，而在vue中的特点是双向数据绑定。可是其实就我我的的理解是：
其实不管是vue仍是react其实仍是提倡单向数据流去管理状态，这一点在vuex和redux状态管理器上体现的很明显。只是vue为UI控件提供了双向数据绑定的方式，在一些须要实时反应用户输入的场合会很是方便。但一般认为复杂应用中这种便利比不上引入状态管理带来的优点。

---

1.单向数据流

“单向数据流”理念的极简示意：

 

image.png

state：驱动应用的数据源。view：以声明方式将 state 映射到视图 。 actions：响应在 view 上的用户输入致使的状态变化

1.1 单向数据流过程：
简单的单向数据流（unidirectional data flow）是指用户访问View，View发出用户交互的Action，在Action里对state进行相应更新。state更新后会触发View更新页面的过程。这样数据老是清晰的单向进行流动，便于维护而且能够预测。

1.2 vuex和redux解决什么问题：
虽然vue和react框架自己有本身状态管理，当咱们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

(1)多个视图依赖于同一状态
(2)来自不一样视图的行为须要变动同一状态

对于问题一，传参的方法对于多层嵌套的组件将会很是繁琐，而且对于兄弟组件间的状态传递无能为力。
对于问题二，咱们常常会采用父子组件直接引用或者经过事件来变动和同步状态的多份拷贝。以上的这些模式很是脆弱，一般会致使没法维护的代码。

所以，咱们为何不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，咱们的组件树构成了一个巨大的“视图”，无论在树的哪一个位置，任何组件都能获取状态或者触发行为！
另外，经过定义和隔离状态管理中的各类概念并强制遵照必定的规则，咱们的代码将会变得更结构化且易维护。

1.3 特色：
（1） 全部状态的改变可记录、可跟踪，源头易追溯;
（2） 全部数据只有一份，组件数据只有惟一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性;
（3） 一旦数据变化，就去更新页面(data-页面)，可是没有(页面-data);
（4） 若是用户在页面上作了变更，那么就手动收集起来(双向是自动)，合并到原有的数据中。

---

2.双向数据流

双向数据绑定，带来双向数据流。数据（state）和视图（View）之间的双向绑定。

ng 里的 ng-model 和 vue 里的 v-model。

说到底就是 （value 的单向绑定 + onChange 事件侦听）的一个语法糖，你若是不想用 v-model，像 React 那样处理也是彻底能够的。

2.1 特色：
不管数据改变，或是用户操做，都能带来互相的变更，自动更新。适用于项目细节，如：UI控件中(一般是类表单操做)。

 

参考资料：

https://github.com/vuejs/vuex/blob/master/docs/zh-cn/forms.md

https://www.jianshu.com/p/810464f1a576