细说MVC和MVP和MVVP的区别

MVC、MVP 和 MVVM 都是基于分层思想的设计模式，用于帮助我们更好地管理代码、提高代码可维护性、降低代码复杂度等。
下面是各自的详细介绍：

MVC：

模型（Model）、视图（View）、控制器（Controller）。MVC 是最早被广泛应用的一种架构模式。模型是用于处理数据的，视图是用于显示数据的，控制器是用于处理用户输入的。控制器接收用户输入后，将其转发给模型进行处理，模型返回结果后，控制器再将其传递给视图进行渲染。这样模型、视图和控制器之间就形成了一个紧密的互动关系，从而实现了业务逻辑和显示逻辑的分离。
评论：用户输入 ->控制器 -> 模型处理数据 ->控制器 -> 视图。控制器是入口和桥梁、单向数据流

MVP：

模型（Model）、视图（View）、表示器（Presenter）。MVP 是从 MVC 模式演变而来的一种架构模式。MVP 将 MVC 中的控制器（Controller）替换成了表示器（Presenter）。表示器负责协调视图和模型之间的交互，同时还承担了控制器的责任。它接收用户输入并将其转发给模型，当模型返回数据后，它将数据传递给视图进行渲染。
评论：表示器是中间商，View和Model都不直接交互。MVP可以更好地分离业务逻辑和视图层，也增加了代码的复杂度和运行时的性能开销。

MVVM：

模型（Model）、视图（View）、视图模型（ViewModel）。MVVM 是 Model-View-ViewModel 的缩写。视图模型负责协调视图和模型之间的交互。当视图接收到用户输入后，视图模型会将数据转换为模型可用的格式并将其传递给模型。当模型返回数据时，视图模型会将数据转换为视图可用的格式并将其传递给视图进行渲染。这种模式的好处是能够将业务逻辑和显示逻辑都从视图中分离出来，使得代码更加清晰易读。
评论：View和Model是通过ViewModel(转换头)直接绑定的、双向数据流。

Virtual DOM：

还有一个非常直观的方法，可以大大降低视图更新的操作：一旦状态发生了变化，就用模版引擎重新渲染整个视图，然后用新的视图更换掉旧的视图。Virtual DOM 就是这么做的，只是加了一些特别的步骤来避免了整棵 DOM 树变更。
用一个对象来表示和构建DOM节点。可以用新渲染的对象树去和旧的树进行对比，记录这两棵树差异。记录下来的不同就是我们需要对页面真正的 DOM 操作，然后把它们应用在真正的 DOM 树上，页面就变更了。这样就可以做到：视图的结构确实是整个全新渲染了，但是最后操作DOM的时候确实只变更有不同的地方。
Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。
步骤一：用JS对象模拟DOM树。
步骤二：比较两棵虚拟DOM树的差异（diff算法）。
两个树的完全的 diff 算法是一个时间复杂度为 O(n^3) 的问题。但是在前端当中，你很少会跨越层级地移动DOM元素。所以 Virtual DOM 只会对同一个层级的元素进行对比，这样算法复杂度就可以达到 O(n)。
1.1. 深度优先遍历，记录差异
1.2. 差异类型：增删改移
1.3. 列表对比算法：动态规划解决字符串的最小编辑距离问题。
1.4. 把差异应用到真正的DOM树上
总的来说，MVC、MVP 和 MVVM 都是一种将数据、业务逻辑和用户界面分离的架构模式，主要区别在于模型、视图和控制器/表示器/视图模型之间的交互方式不同。其中，MVVM 增加了视图模型的概念，将控制器/表示器的功能进一步细化，实现了视图和模型之间的完全解耦。