你真的了解MVC,MVVM设计模式吗?

1 MVC,MVVM,MVP 设计模式是什么?

MVC、MVP 和 MVVM 是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化我们的开发效率。

比如说我们实验室在以前项目开发的时候，使用单页应用时，往往一个路由页面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里。

页面的渲染、数据的获取，对用户事件的响应所有的应用逻辑都混合在一起，这样在开发简单项目时，可能看不出什么问题，当时一旦项目变得复杂，那么整个文件就会变得冗长，混乱，这样对我们的项目开发和后期的项目维护是非常不利的。

2 MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。

 View 负责页面的显示逻辑，
 Model 负责存储页面的业务数据，以及对相应数据的操作,
 Controller 层是 View 层和 Model 层的纽带，
 它主要负责用户与应用的响应操作当用户与页面产生交互的时候
复制代码

2.1 View 和 Model 的 观察者模式

当 Model 层发生改变的时候它会通知有关 View 层更新页面。
复制代码

2.2 Controller 中的事件触发器

Controller开始工作，通过调用 Model 层，来完成对 Model 的修改 
然后 Model 层再去通知 View 层更新。
复制代码

3 MVP 模式与 MVC 唯一不同的在于 Presenter 和 Controller。

3.1 Controller

在 MVC 模式中我们使用观察者模式，来实现当 Model 层数据发生变化的时候，通知 View 层的更新。

这样 View 层和 Model 层耦合在一起，当项目逻辑变得复杂的时候，可能会造成代码的混乱，并且可能会对代码的复用性造成一些问题。

3.2 Presenter

MVP 的模式通过使用 Presenter 来实现对 View 层和 Model 层的解耦。

MVC 中的 Controller 只知道 Model 的接口，因此它没有办法控制 View 层的更新

MVP 模式中，View 层的接口暴露给了 Presenter 因此我们可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起，以此来实现 View 和 Model 的同步更新。

这样就实现了对 View 和 Model 的解耦，Presenter 还包含了其他的响应逻辑。

4 MVVM

MVVM 模式中的 VM，指的是 ViewModel，它和 MVP 的思想其实是相同的，不过它通过双向的数据绑定，将 View 和 Model 的同步更新给自动化了。

当 Model 发生变化的时候，ViewModel 就会自动更新；

ViewModel 变化了，View 也会更新。

这样就将 Presenter 中的工作给自动化了。

我了解过一点双向数据绑定的原理，比如 vue2x 是通过使用数据劫持和发布订阅者模式来实现的这一功能.

问题: React 和Vue 模式有不同吗? 下期有机会更新他们的设计模式区别和 vue3中的Proxy 以及为什么需要改变双向绑定的原理