一、MVC和MVVM是什么?
MVC是Model-View-Controller的简写,Model就是模型,对应后端数据,View就是视图对应用户界面,Controller就是控制器,对应页面的业务逻辑。
MVC的工作机制原理就是,用户操作会请求服务器路由,路由就会调用对应的控制器来处理,控制器就会获取后台数据,将结果返回给前端,进行页面渲染。
MVVM是Model-View-ViewModel的简写,它本质上就是MVC的改进版,ViewModel的存在目的是抽离Controller中展示的业务逻。在MVVM中,ViewModel主要关注视图的数据绑定和展示逻辑,而在MVC中,Controller则更多地涉及业务逻辑的处理 。
二、MVC和MVVM的区别
第一,MVC是单向的,而MVVM是双向的,并且是自动的,也就是数据发生变化自动同步视图,视图发生变化自动同步数据。
第二个,解决了 MVC 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验等问题。
第三个,在数据频繁更新的时候,采用了虚拟DOM,减少过度渲染,提高性能。
三、对应的常见框架
MVC框架:
AngularJS:AngularJS是一个由Google开发的JavaScript前端框架,它采用了MVC设计模式,使得开发者可以更好地组织和管理前端代码。
MVVM框架:
Vue.js:Vue.js是一个流行的JavaScript框架,采用MVVM设计模式,提供了数据驱动的界面和组件化的开发方式,使得开发者能够更容易地构建交互性强、响应迅速的应用程序。
React.js:React.js虽然本身并非严格意义上的MVVM框架,但其采用了虚拟DOM以及单向数据流的概念,可以与一些状态管理库(如Redux)结合,实现与MVVM类似的数据流管理。