单向数据流和双向数据流及双向数据绑定

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

1.单向数据流

示意图：

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

单向数据流指只能从一个方向修改数据，姑且我们可以这样理解，如下图所示。一个父组件下有两个子组件1和子组件2，父组件可以向子组件传递数据。假如子组件都获取到了父组件的name，在子组件1中对name重新修改之后，子组件2和父组件中的值并不会发生改变，这正是因为Vue中的机制是单向数据流，子组件不能直接改变父组件的状态。但反过来，如果是父组件中的name修改了，当然两个子组件中的name也就改变了。

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.双向数据绑定

主要是由MVVM框架实现：

• Model与ViewModel之间的双向关系
  Model通过Ajax通信，发送数据给ViewModel。
  ViewModel也可以通过Ajax通信，发送请求给Model。
• ViewModel与View之间的双向关系
  ViewModel中的数据改变，可以同时改变View上的显示内容。
  View上的内容改变(比如输入框中的内容)，也可以同时改变ViewModel中对应的数据。

双向数据绑定，带来双向数据流。ViewModel中的data部分和View之间的双向关系。。

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

双向数据流/双向数据绑定：

1）js内存属性改变，影响页面变化

2）页面的改变硬性js 内存属性的改变

当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。

文章参考博客：https://www.jianshu.com/p/810464f1a576
参考 mvvm的介绍： https://www.jianshu.com/p/e4e3519a58a6