浅谈vue和react的数据流和绑定

数据流：

Vue和React均是单向数据流传递

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

数据的绑定 :

Vue是双向绑定和React是单向绑定

它们俩主要是由MVVM框架实现，在Vue中主要由三个部分组成，View、ViewModel和Model组成，其中View和Model不能直接进行通信，他们要通过中间件ViewModel来进行。例如，当Model部分数据发生改变时，由于vue中Data Binding将底层数据和Dom层进行了绑定，ViewModel通知View层更新视图；当在视图 View数据发生变化也会同步到Model中。View和Model之间的同步完全是自动的，不需要人手动的操作DOM,所以叫双向绑定。

而在React中虽然modal和view之间也是通过ViewMode处理,但是l却需要setState去手动刷新渲染view，所以叫单向绑定

MVC和MVVM的区别

就controller和ViewModel的区别，也就是说MVVM摆脱了更多操作的DOM的环节，把MVC里的controller的数据的加载、加工功能分离出来，更专注于处理业务逻辑而不是去关心 DOM 操作，MVVM优点就是更有利于测试和debugger以及前端的代码的整洁易读性

举例说明(一个MVVM框架和jQuery操作DOM相比的区别):
我们先看用jQuery实现的修改两个DOM节点的例子：

<!-- HTML -->
<p>Hello, <span id="name">Bart</span>!</p>
<p>You are <span id="age">12</span>.</p>

Hello, Bart!
You are 12.

用jQuery修改name和age节点的内容：

var name = 'Homer';
var age = 51;

$('#name').text(name);
$('#age').text(age);

Hello, Homer!
You are 51.

如果我们使用MVVM框架来实现同样的功能，我们首先并不关心DOM的结构，而是关心数据如何存储。最简单的数据存储方式是使用JavaScript对象：

var person = {
    name: 'Bart',
    age: 12
};

我们把变量person看作Model，把HTML某些DOM节点看作View，并假定它们之间被关联起来了。

要把显示的name从Bart改为Homer，把显示的age从12改为51，我们并不操作DOM，而是直接修改JavaScript对象：

Hello, Bart!
You are 12.

person.name = 'Homer';
person.age = 51;

Hello, Homer!
You are 51.

执行上面的代码，我们惊讶地发现，改变JavaScript对象的状态，会导致DOM结构作出对应的变化！这让我们的关注点从如何操作DOM变成了如何更新JavaScript对象的状态，而操作JavaScript对象比DOM简单多了！这就是MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！

简单列举下MVVM优点
1.双向绑定技术，当Model变化时，View-Model会自动更新，View也会自动变化。很好做到数据的一致性，不用担心，在模块的这一块数据是这个值，在另一块就是另一个值了。所以 MVVM模式有些时候又被称作：model-view-binder模式。

2.View的功能进一步的强化，具有控制的部分功能，若想无限增强它的功能，甚至控制器的全部功几乎都可以迁移到各个View上（不过这样不可取，那样View干了不属于它职责范围的事情）。View可以像控制器一样具有自己的View-Model.

3.由于控制器的功能大都移动到View上处理，大大的对控制器进行了瘦身。不用再为看到庞大的控制器逻辑而发愁了。

4.可以对View或ViewController的数据处理部分抽象出来一个函数处理model。这样它们专职页面布局和页面跳转，它们必然更一步的简化。