理解 MVC 和 MVVM
MVC,MVP,MVVM是三种常见的架构模式,它通过分离关注点来改进代码组织方式。不同于设计模式(Design Pattern),只是为了解决一类问题而总结出的抽象方法,一种架构模式往往能使用多种设计模式。
MVC模式是MVP,MVVM模式的基础,这两种模式更像是MVC模式的优化改良版,他们三个的 MV 即 Model,view 相同,不同的是MV之间的纽带部分。本文主要介绍MVC与MVVM的应用与区别,因为MVP好像不是很常用。
一、什么是 MVC ?
后端的开发思想——单向通信
- Model:数据层(存数据、改数据)
- View:视图层(页面展示和dom的操作)
- Controller:控制视图层和数据层的关联,主要通过监听dom事件
分层的目的:让彼此的职责分开。Controller 是 Model 和 View 的协调者,View 和 Model 不直接联系,基本都是单向联系,必须通过 Controller 来承上启下。
MVC允许在不改变视图的情况下改变视图对用户输入的响应方式,用户对View的操作交给了Controller处理,在Controller中响应View的事件调用Model的接口对数据进行操作,一旦Model发生变化便通知相关视图进行更新。
二、什么是 MVVM ?
前端的开发思想——双向绑定
- Model:是data里数据(通过ajax等获取的数据)
- View :视图层
- VM (ViewModel):new vue 中 new出来的对象就是VM,是V-M的调度者,提供了数据的双向绑定
- 耦合低,是真的低,view和model完全分离
- 维护性高,易维护,上手快
- 双向绑定:视图发生变化数据自动同步,数据发生变化视图也自动同步
- 减少了dom的操作,可以更多的关注业务逻辑
![](https://img2020.cnblogs.com/blog/2580638/202111/2580638-20211118170301423-1496384741.png)
四、MVVM与MVC的区别
MVC 和 MVVM 其实区别并不大,都是一种设计思想。主要就是MVC 中 Controller 演变成 MVVM 中的 viewModel。MVVM 主要解决了 MVC 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验
MVVM 实现了View和Model的自动同步,也就是当Model的属性改变时,我们不用再自己手动操作Dom元素,来改变View的显示,而是改变属性后该属性对应View层显示会自动改变。非常的神奇~
整体看来,MVVM比MVC精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不用再用选择器操作DOM元素。因为在MVVM中,View不知道Model的存在,Model和ViewModel也观察不到View,这种低耦合模式提高代码的可重用性。