MVC和MVVM前端框架基础知识讲解

最新推荐文章于 2024-03-25 20:41:40 发布

Aress"

最新推荐文章于 2024-03-25 20:41:40 发布

阅读量912

点赞数 4

分类专栏： web前端开发学习文章标签： mvc mvvm 前端框架前端

本文链接：https://blog.csdn.net/General_D/article/details/120503979

版权

web前端开发学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

MVC和MVVM前端框架基础知识讲解

前言
一、MVC和MVVM是什么，为什么会用到？
二、MVVM的原理图解
总结

前言

提示：本文讲解的为基础知识，大神请跳过；如果需要快捷查找，请注意目录，原理图在最后，请直接跳到最后
引言：在我们进行前端知识的学习时，最初接触到的可能是“MVC”模型，但是该模型仿佛更接近后端逻辑，所以“MVVM”模型是在“MVC”的基础上衍生的，也更符合前端开发的逻辑

一、MVC和MVVM是什么，为什么会用到？

MVC

MVC是应用最广泛的软件架构之一；
一般MVC分为:

Model：数据模型，用来存储数据；
View：视图界面，用来展示UI界面和响应用户交互；
Controller：控制器(大管家角色)，监听模型数据的改变和控制视图行为、处理用户交互；

这主要是基于分层的目的,让彼此的职责分开.

View一般用Controller来和Model进行联系。

Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。

在这里插入图片描述

MVVM

Model：数据模型，用来存储数据；
View：视图界面，用来展示UI界面和响应用户交互；
ViewModelL：视图模型，Controller抽离出来的数据和逻辑处理部分
Controller：控制器(大管家角色)，监听模型数据的改变和控制视图行为、处理用户交互；

在这里插入图片描述
上图描述了MVVM一个基本结构，看到了什么，是不是发现比MVC架构中多了一个ViewModel，没错，就是这个ViewModel，他是MVVM相对于MVC改进的核心思想。在开发过程中，由于需求的变更或添加，项目的复杂度越来越高，代码量越来越大，此时我们会发现MVC维护起来有些吃力，首先被人吐槽的最多的就是MVC的简写变成了Massive-View-Controller（意为沉重的Controller）
由于Controller主要用来处理各种逻辑和数据转化，复杂业务逻辑界面的Controller非常庞大，维护困难，所以有人想到把Controller的数据和逻辑处理部分从中抽离出来，用一个专门的对象去管理，这个对象就是ViewModel，是Model和Controller之间的一座桥梁。当人们去尝试这种方式时，发现Controller中的代码变得非常少，变得易于测试和维护，只需要Controller和ViewModel做数据绑定即可，这也就催生了MVVM的热潮。

总结：MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。

MVVM模式的优点:

低耦合:View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

可重用性: 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。

独立开发: 开发人员可以专注于业务逻辑和数据的开发,设计人员可以专注于页面的设计。

为什么会用到 MVC，MVVM ？

这个问题主要针对刚入门的宝贝，学习前端，切忌钻牛角尖；
首先设计模式是前辈们经过无数的实践总结出来的一种便捷，智慧的，经得起考验的标准的工作流程
使用这些模型，我们可以更高效的去实现构建，例如

使其数据和其表示分离，是的添加或者删除一个用户变得容易，甚至可以在程序运行时动态的执行，model 和view
能够单独的开发，增加了程序的，课维护性，可扩展性并使测试变得容易
控制逻辑和表现层分离，运行程序能够在运行时根据工作流，用户习惯

MVC 和 MVVM 的区别？

也许你是在学习VUE的过程中来了解MVVM的原理的，所以，之所以用到MVVM就是因为传统的网页编写需要大量的DOM操作，无疑这种没有技术含量的做工最后都会变为无用功，所以

MVC中Controller演变成MVVM中的ViewModel
MVVM通过数据来显示视图层而不是节点操作
MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低，加载速度变慢，影响用户体验等问题。

MVVM 值得用么？

推荐使用，并且可以直接在你现有的MVC基础上进行扩展，我们首先来看下优缺点
优点：

Controller清晰简洁： ViewModel分离了大部分Controller代码，更加清晰和容易维护。
方便测试：开发中大部分Bug来至于逻辑处理，由于ViewModel分离了许多逻辑，可以对ViewModel构造单元测试。
开发解耦(举两个例子)：
a.一人负责逻辑实现、另一人负责UI实现；
b.敏捷开发时，会发经常发不是等后端做好了接口我们再去开发，不过在没有接口的情况下通常我们可以把Controller和View完成。

缺点：
1.看起来代码会比MVC多点
2.需要对每个Controller实现绑定，如果处理不好，反而会有一种“画虎不成反类犬”的感觉