MVC、MVP 和 MVVM 是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化开发效率。
三种常见软件架构设计模式能解决的问题
在开发单页面应用时，往往一个路由页面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里。页面的渲染、数据的获取，对用户事件的响应所有的应用逻辑都混合在一起，这样在开发简单项目时， 可能看不出什么问题，如果项目变得复杂，那么整个文件就会变得冗长、混乱，这样对项目开发和后期的项目维护是非常不利的。
MVC
-
Model（模型）:
- 负责存储应用程序的业务数据以及定义对数据的操作。这包括数据的获取、修改、以及数据之间的关系管理。
- 与数据库通信，执行数据的读写操作，确保数据的一致性和完整性。
- 实现观察者模式，以便当数据发生变化时通知注册的观察者（通常是 View 层），使其能够更新相应的界面。
-
View（视图）:
- 负责展示用户界面，以及用户与应用程序交互的方式。这包括页面的布局、样式和显示逻辑。
- 实现观察者模式，注册对 Model 的观察者，以便在 Model 数据发生变化时更新界面展示。
- 通常不直接处理业务逻辑，而是将用户的输入传递给 Controller 处理。
-
Controller（控制器）:
- 充当 Model 层和 View 层之间的桥梁，负责协调用户输入、数据操作和界面更新。
- 包含事件触发器，用于响应用户的操作（例如按钮点击、表单提交等）。
- 接收用户输入，调用相应的 Model 方法来修改数据，并确保 View 层及时更新以反映这些变化。
- 通常包含业务逻辑，确保用户输入的合法性，然后将操作传递给 Model 层执行。
MVVM
Vue.js 是一个基于 MVVM（Model-View-ViewModel）模型的 JavaScript 框架。MVVM 是一种设计模式，用于将应用程序的逻辑与用户界面的表示分离，并提供一种更易于管理和维护的架构。
-
Model（模型）:
- 包含应用程序的业务数据和业务逻辑。
- 与MVC中的Model相似，负责数据的获取、修改以及数据之间的关系管理。
- 不涉及直接与视图交互，主要用于维护数据的一致性和完整性。
-
View（视图）:
- 负责用户界面的展示，包括布局、样式和显示逻辑。
- 与MVC中的View类似，但不直接与Model层通信。它通过ViewModel来获取和展示数据。
- 不包含业务逻辑，主要关注界面的呈现。
-
ViewModel（视图模型）:
- 负责连接View和Model，充当二者之间的中介。
- 监听Model中数据的变化，并通知View层进行相应的更新。这通过数据绑定实现。
- 包含与用户交互相关的业务逻辑，处理用户输入和操作。
- 通过数据绑定，使Model和View之间实现双向同步，确保数据的一致性。
- 通常不涉及具体的UI操作，而是关注数据的转换和逻辑处理。
在MVVM中，Model和View之间不存在直接的联系，它们通过ViewModel进行交互。ViewModel与View之间的数据绑定确保了数据的自动同步，使得开发者可以更专注于数据的处理和业务逻辑，而不必关心DOM操作。这种模式有助于提高代码的可维护性和可测试性，并减少了与用户界面交互的复杂性。
MVP
-
Model（模型）:
- 与MVC中的Model类似，负责应用程序的业务数据和业务逻辑。
- 提供数据的获取、修改以及数据之间的关系管理。
-
View（视图）:
- 负责用户界面的展示，包括布局、样式和显示逻辑。
- 与MVC中的View类似，但不包含任何关于数据处理和业务逻辑的代码。
- 暴露接口给Presenter，以便Presenter可以更新视图和响应用户输入。
-
Presenter（主持人）:
- 充当View层和Model层之间的中介，负责协调二者的交互。
- 从View层接收用户输入，并根据需要更新Model层的数据。
- 包含业务逻辑，负责处理用户操作、调用Model层的方法以及更新View层。
- 通过View层的接口将Model的变化和View的变化绑定在一起，以实现View和Model的解耦。
- 确保View层和Model层之间的通信是单向的，即View层只能通过Presenter来更新Model。
在MVP中，Presenter的引入解决了MVC中View和Model之间可能存在的紧密耦合问题。Presenter作为中间人，处理用户输入并更新Model，同时通过View的接口更新UI。这种模式提高了代码的可测试性和可维护性，使得项目逻辑更清晰，并减少了View层与Model层之间的直接关系。
