MVVM模式与MVC模式的区别

本文介绍了MVC和MVVM模式的区别。MVC模式中,模型、视图和控制器各自分离,实现关注点分离;MVVM模式下,视图和模型通过视图模型双向绑定,适合数据驱动的场景。MVVM具有低耦合、可重用性高、易于测试等优点,而MVC则在小型项目中可能不适用,视图与控制器间的紧密联系可能影响重用性。

1.MVC
MVC是Model View Controller的缩写
Model:模型层,是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存储数据。
View:视图层,用户界面渲染逻辑,通常视图是依据模型数据创建的。
Cotroller:控制器,是数据模型与视图之间通信的桥梁,通常控制负责从事图读取数据,控制用户输入,并向模型发送数据。
MVC的特点
实现关注点分离,即应用程序中的数据模型与业务和展示逻辑解耦。就是将模型和视图之间实现代码分离,松散耦合,使之成为一个更容易开发、维护和测试的客户端应用程序。
MVC的应用
主要用于中大型的分层开发
2.MVVM
MVVM是Model-view-ViewModel的简写,即模型-视图-视图模型。
.Model:模型,指的是后端传递的数据
.View:视图,指的是所看到的页面
.ViewModel:视图模型,mvvm模型的核心,它是连接view和model的桥梁。主要用来处理业务逻辑
它有两个方向
.一是将模型转化成视图,即将后端传递的数据转化成所看到的的页面。实现方式是:数据绑定
.二是将视图转化成模型,即将所看到的的页面转化成后端的数据。实现方式是:DOM事件监听
这两个方式都实现的,就是数据双向绑定
MVVM的特点:在MVVM的框架下,视图和模型不能直接通信的,他们通过ViewModel来通信,ViewModel通常实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知对应的视图作自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改定,这实际就显示了数据双向绑定。并在MVVM中的View和ViewModel可以互相通信
MVVM适用场景:适用于数据驱动的场景,数据操作教多的场景。
MVC和MVVM的优缺点
MVVM:
.低耦合,视图可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变
.可重用性,可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑
.独立开发,开发人员可以专注于业务逻辑和数据开发,设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码
.可测试,界面向来是比较难于测试的,而现在测试可以针对ViewModel来写
.双向数据绑定,它实现了View和Model的自动同步,当Model的属性改变时,不需要手动操作Dom元素,来改变View的显示,而是改变属性后属性对应View层显示会自动改变
MVC的优点:
.耦合度低,视图层和业务层分离
.重用度高
.生命周期成本低
.部署快
MVC的缺点
.不适合小型项目开发
.视图域控制器间的过于紧密的连接,视图与控制器是相互分离的,但却是联系紧密的部件,妨碍了他们的独立重用
.降低了视图对模型数据的访问,依据模型操作接口的不同,视图可能需要多下次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问,也将损害操作性能。

MVVM模式MVC模式存在多方面的具体区别: ### 架构结构 - **MVC**:由Model(模型)、View(视图)Controller(控制器)构成。在这种架构中,View接收用户的输入,将其传递给Controller,Controller处理请求后Model交互,获取或更新数据,最后Controller再将处理后的数据交给View进行显示。例如在传统的Web应用中,JQuery或者原生JS直接操作DOM,就是MVC模式的一种体现,开发者需要手动操作DOM来更新视图 [^4]。 - **MVVM**:由Model、ViewViewModel组成。ViewModel是MVVM模式的核心,它充当了ViewModel之间的桥梁。ViewModel进行了双向绑定(Data Binding),Model数据的更改会自动反映在View上,反之亦然。ViewModel负责处理View或Model的变化,根据具体情况协调两者之间的交互。例如在Vue.js应用中,不直接操作DOM,数据视图通过Vue实例连接,Vue实例将DOM操作封装在指令中,程序员无需直接操作DOM [^3][^4]。 ### 数据绑定 - **MVC**:通常是单向的数据流动。数据从Model流向View,当Model的数据发生变化时,需要手动更新View。同样,当用户在View上进行操作时,也需要手动将数据传递给Controller,再由Controller更新Model。例如在一个简单的表单提交场景中,用户在表单中输入数据,点击提交按钮后,需要编写代码将表单数据收集起来,传递给Controller进行处理,然后再根据处理结果更新ModelView [^2]。 - **MVVM**:实现了ViewModel的自动同步,即双向数据绑定。当Model的属性发生改变时,不需要手动操作DOM元素来改变View的显示,属性对应的View层会自动改变。反之,当用户在View上进行操作导致数据发生变化时,Model也会自动更新。例如在Vue的示例代码中: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MVVM Example</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <!-- View --> <input v-model="message" placeholder="Enter a message"> <p>{{ message }}</p> </div> <script> // ViewModel new Vue({ el: '#app', data: { // Model message: '' } }); </script> </body> </html> ``` 在这个例子中,`v-model` 指令实现了输入框 `message` 数据的双向绑定,当输入框中的内容发生变化时,`message` 数据会自动更新;当 `message` 数据发生变化时,输入框显示文本也会自动更新 [^2][^5]。 ### 代码复杂度可维护性 - **MVC**:随着应用规模的增大,Controller会变得越来越复杂,包含大量的业务逻辑视图更新代码,导致代码的可维护性可测试性降低。因为ViewController之间的耦合度较高,修改View可能会影响到Controller,反之亦然。例如在一个大型的Web应用中,Controller可能需要处理多个页面的请求数据更新,代码会变得冗长且难以理解 [^1]。 - **MVVM**:由于实现了数据的自动绑定视图业务逻辑的分离,降低了ViewModel之间的耦合度,使得代码的可维护性可测试性得到提高。ViewModel可以独立于View进行测试,而且当View或Model发生变化时,只需要修改对应的部分,不会对其他部分产生太大的影响。例如在一个复杂的单页面应用中,不同的视图模块可以对应不同的ViewModel,每个ViewModel负责处理自己的业务逻辑数据绑定,代码结构更加清晰,易于维护 [^1]。 ### 开发效率 - **MVC**:在开发过程中,需要手动编写大量的代码来实现数据的传递视图的更新,开发效率相对较低。特别是在处理复杂的交互数据更新时,需要花费更多的时间精力来编写调试代码。 - **MVVM**:通过数据绑定自动化的视图更新机制,减少了手动编写代码的工作量,提高了开发效率。开发者可以更专注于业务逻辑的实现,而不需要过多地关注DOM操作数据同步的问题。例如在开发一个实时数据展示的应用时,使用MVVM模式可以快速实现数据的实时更新视图的动态展示 [^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值