MVC、MVVM和单向数据流的对比

前端开发本质上是一种展现层开发，我思考了一下这句话，这句话用人话说就是前端开发本身就是写界面的。但是别人能把写界面的能总结成下面一个循环，我发现这真的是能力了。如下图，有略微的改动：

下面就开始进入正题了。

基于MVC的前端开发
简单的MVC
先看下图：

1. 用户操作界面
2. 当用户操作的视图的时候会派发一个事件给Action
3. 当Action接受到这个事件的时候，调用Model对应的方法

演进的前端MVC

1. 用户操作界面
2. 当用户操作的视图的时候会派发一个事件给Action
3. 当Action接受到这个事件的时候，调用Model对应的方法
4. Model得知view改变了，然后进行相应的操作，改变自身所存储的数据
5. 当Model改变了，派发一个事件给Action

进一步复杂的前端MVC

1. 用户操作界面
2. 当用户操作的视图的时候会派发一个事件给Action
3. 当Action接受到这个事件的时候，调用Model对应的方法
4. Model得知view改变了，然后进行相应的操作，改变自身所存储的数据
5. 当Model改变了，派发一个事件给Action
6. 当Action知道Model的数据变化的时候，调用views中的方法
7. view改变自身

但是这样是有下面两个问题的，

• 交互增加导致view的控制代码迅速膨胀，最终导致代码不可维护
• Model的控制代码也会变多，

以至于出现下面的状况：

前端的MVVM
虽然mvc有以上的弊端，但是因为没有一个好的架构思想去取代他，所以也只能用MVC了，但是随着前端angular的横空出世，倡导的MVVM思想也随之深入人心，先看下图：

1. view和viewModel的数据双向绑定
2. 当用户操作view的时候，viewmodel也进行对象对应的变化

这样，我们能通过操作Model来控制view的显示，一个页面的比如能拆分为小功能(注册/登陆、表单提交、XXX功能)这样每个功能对应一个Model，我们就能模块化的管理Model，就变为了下图：

所以当用户操作界面的时候，我们viewModel就知道是哪部分发生了变化，对应的viewModel就进行改变。

React一种新的思想
了解React的都知道，React对强大的功能就是vdom，能够计算出最有效也是花费最小的vdom和真实dom的差异并进行改变。

下图为MVVM的整体设计思路：

用户操作view
dispatch view事件给状态管理
状态管理工具更新状态/进行到下一个状态
根据新的状态，render view
React遵从的是单向的数据流：

• 存在一个Model到React的映射关系，即view的渲染方法
• view并不知道自己对应Modle哪一块
• 于是每次Model的变更，view全部更新。React的vdom算法保证了render的高效

MVVM和React
要解决的问题： 复杂的web交互导致view更新逻辑的爆炸

解决思路：

• MVVM：记录Model、双向绑定，Model变更时更新view对应部分
• React：实现view高效更新算法，Model变更时更新整个view

MVVM的实现是在工程上进行解决，React在解决思路(算法)上进行解决

版权声明：本文为博主原创文章，转载请注明出处 https://blog.csdn.net/woshina...