vue学习之路之MVC,MVP,MVVM之间的区别和联系

本文探讨了MVC、MVP和MVVM三种软件架构模式的区别与联系,重点介绍了MVVM模式的数据双向绑定特性及其带来的开发效率提升。
最开始是MVC模式,这里M代表的是model负责提供数据,V是视图view,C 代表控制器,他们之间是单向通信,V和M之间的通信是通过C来作为桥梁的,也就是说V和M并不是直接通信;
再后来的是MVP模式,这里的P代表presenter,其和MVC之间唯一的不同点在于V和P只之间的并不是直接通信的,是通过接口来通信的,而且还是双向的;
MVVM最大的特点在于数据的数据的双向绑定,当视图V变化的时候,ViewModel也会跟着变化,相反ViewModel变化的时候View变化,这样做最大的好处就是,开发者不用再把精力放在无休止的操作DOM上,大大提高了生产的效率。其中
可是为什么会从MVC再到MVP最后演变到MVVM,以上就是原因(数据的双向绑定),这也是和jQuery的一大不同之处吧。
它的基本思想与 Angular 类似,但是用法更简单, VUE和Angular相比,
而且比angular清凉的多。
### MVVMMVC MVP 架构模式的区别对比 #### 1. MVC(Model-View-Controller) MVC 是一种经典的架构模式,主要用于将应用程序的逻辑分离为三个主要组件:Model(模型)、View(视图) Controller(控制器)。 - **Model**:负责数据管理以及业务逻辑的实现。它是应用程序的核心部分,与数据库交互并维护状态[^1]。 - **View**:负责用户界面的展示,不包含任何业务逻辑。它只负责显示从 Controller 接收到的数据[^3]。 - **Controller**:作为 Model View 之间的桥梁,接收用户输入并更新 Model 或 View。它是控制流的核心,决定了应用程序的行为[^1]。 MVC 的主要特点是解耦了视图模型,使得两者可以独立开发测试。然而,由于 Controller 承担了较多的责任,可能导致其代码复杂度增加。 #### 2. MVP(Model-View-Presenter) MVPMVC 的变体,进一步强化了视图模型之间的分离。 - **Model**:与 MVC 中的角色相同,负责数据管理业务逻辑[^3]。 - **View**:仅负责展示数据,但不再直接与 Model 交互,而是通过 Presenter 进行通信[^3]。 - **Presenter**:作为 View Model 的中介,负责处理所有业务逻辑,并根据需要更新 View 或 Model。Presenter 持有对 View 的引用,但 View 不直接依赖于 Presenter[^2]。 MVP 的主要优点是使 View 更加轻量化,同时便于单元测试,因为 Presenter 可以独立于 UI 进行测试[^4]。 #### 3. MVVM(Model-View-ViewModel) MVVM 是在 MVP 基础上发展而来的模式,特别适合使用数据绑定技术的场景。 - **Model**:与 MVC MVP 中的角色相同,负责数据业务逻辑[^3]。 - **View**:负责用户界面的展示,通过数据绑定机制与 ViewModel 进行交互。View 不直接调用 ViewModel 的方法,而是通过绑定属性来反映数据变化[^2]。 - **ViewModel**:充当 View Model 之间的桥梁,封装了所有的业务逻辑状态管理。ViewModel 不直接引用 View,而是通过数据绑定机制将数据的变化自动同步到 View 上[^4]。 MVVM 的主要优势在于减少了手动更新视图的需求,利用数据绑定技术提高了开发效率代码可维护性[^4]。 #### 对比总结 | 特性/模式 | MVC | MVP | MVVM | |------------|-----|-----|------| | 数据绑定 | 否 | 否 | 是 | | 视图依赖 | 直接依赖 Controller | 依赖 Presenter | 通过数据绑定间接依赖 ViewModel | | 测试友好性 | 较低 | 较高 | 高 | | 复杂度 | 中等 | 高 | 高 | | 应用场景 | Web 应用 | 移动应用 | 现代前端框架(如 WPF、Angular、Vue) | ```python # 示例代码:MVVM 中的数据绑定 class ViewModel: def __init__(self): self.data = "Hello, MVVM!" class View: def __init__(self, vm): self.vm = vm def render(self): print(f"View displays: {self.vm.data}") vm = ViewModel() view = View(vm) view.render() # 输出: View displays: Hello, MVVM! ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值