三种模型(MVVM、MVP、MVC)——面试重点

MVVM、MVP、MVC是常见的软件架构模式，它们在Vue中有不同的实现方式。

                        ​​​​​​​        ​​​​​​​  

一、MVVM：M所对应的是模型(modal)，V所对用的是视图(View)，而VM所对应的是视图模型(View-Modal)

MVVM在Vue中的架构模式：       

• Model(模型)：数据模型(对应data)

• View(视图)：用户界面(Vue中，对应生成的DOM)

• ViewModel(视图模型)：连接视图和用户的桥梁(Vue中代表实例本身，负责数据绑定和DOM更新)

• MVVM的核心特点：通过数据绑定机制，实现视图和模型的自动同步。

• 总结：Vue通过响应式系统(Vue2-Object.defineProperty和Vue3-Proxy)响应式的原理、编译系统和虚拟DOM去实现

二、MVC：C所对应的是控制器(Controller)

MVC将应用分成三个部分：

• Model(模型)：负责数据管理(前端应用中，通常是JS对象或者数据结构)       

• View(视图)：负责用户界面(HTML)

• Controller(控制器)：连接模型和视图，负责业务逻辑(JS函数和对象，处理DOM事件)

• MVC的核心特点：控制器通过去接收用户输入，然后去操作模型数据，最后更新视图。视图和模型之间可能存在直接通信。

• 总结：分工明确适合简单的应用，缺点是控制器容易变得臃肿。

三、MVP：P所对应的是展示器(Presenter)

MVP是MVC的改进版：

• Model(模型)：负责数据管理        

• View(视图)：负责用户界面

• Presenter(展示器)：作为视图和模型的中间人

• MVP的核心特点：视图和模型完全分离，所有交互都是通过Prensenter进行。视图只负责展示，不包含业务逻辑。

• 总结：视图和模型完全解耦，适合单元测试。