浅谈MVC和MVVM

传统模型:MVC

• M model 模型–表示应用程序核心，存储数据，如数据库
• V view 视图–前端显示页面
• C controller 控制器–进行业务逻辑处理
  在model中通常负责在数据库中存取数据，view视图是通过模型数据创建的，controller是中间过程，从视图读取数据，做一定的逻辑处理，将处理后的数据发送到模型中。

优点

1. 视图和业务分离，当视图改变时不需要重新修改模型和控制器，三个部分单向连接，互不干扰
2. 重用性高，多个视图可以共享同一个模型，例如用户可以通过手机或电脑订购某种产品，虽然订购方式页面都不同，但是处理方式相同
3. 分工明确，更好维护

缺点

1. 在架构MVC模型时需要花费时间分离，同时在模型和视图严格分离下，调试应用程序也带来了困难
2. 视图通过模型显示数据，根据不同接口，需要进行频繁访问，性能方面不够好
3. 把逻辑处理全部放到中心控制部件，进行大量的复杂操作堆积在此，结构有种头重脚轻的感觉，难以维护
4. 每次处理完逻辑要把数据放到数据库，然后还要到数据库访问数据渲染到页面

MVVM模型

MVC的改进版，将view 的状态和行为抽象化，将视图UI和业务逻辑分开。

• M model 模型 数据中心
• V view 视图 用户看到的一切
• V ViewModel 暴露公共属性和命令的视图的抽象，同步在在view和model之间，实现双向绑定。
  在MVVM模式下，view和model之间没有直接的联系，而是通过ViewModel进行交互，view数据变化会同步到Model中，Model数据的变化也会立即反应到View上

优点

1. 既通过ViewModel实现双向绑定，则数据会在view和model上自动更新，不需要人为操作DOM，开发者只需关注业务逻辑
2. 在MVVM封装后的框架使用起来简单，上手快，对开发较为友好，如vue.js、react.js、angular.js等

缺点

1. 代码重用性不高，因为view和model双向绑定，不同模块的model都不同
2. 找bug比较难，因为数据双向绑定会进行传递，要找到原始出问题的地方就不容易