分析Web前端中MVVM框架的关键技术及优势
分析 Web 前端中 MVVM 框架的关键技术及优
势
摘要：在互联网技术日新月异的今天，随着 Web 技术的不断发展，以前的技术无法满足日趋
复杂的 Web 应用，如果还在使用之前老的框架，对 View 层的操作就会难以维护，这就是前端
框架要不断演变的主要原因，前端 MVVM 框架应运而生，前端模块化开发模式成为现在的主
流。该文将重点介绍 MVVM 框架的发展由来、MVVM 模式的工作原理以及和传统的 MVC 模
式进行对比、前端主流 MVVM 框架的对比、详细分析 MVVM 框架的关键技术以及优势所在。
关键词：MVC; MVVM; VUE; Web 前端；
Abstract:With the rapid development of Internet technology today,with the continuous development of
web technology,the previous technology cannot meet the increasingly complex web applications.If
you still use the old framework before,the operation of the View layer will be difficult to maintain.This
is the front end the main reason for the continuous evolution of the framework is that the front-end
MVVM framework came into being,and the front-end modular development model has become the
mainstream.This article will focus on the origin of the development of the MVVM framework,the
working principle of the MVVM model and the comparison with the traditional MVC
model.Comparison of mainstream MVVM framework,detailed analysis of the key technologies and
advantages of MVVM framework.
Keyword:MVC; MVVM; VUE; Web front end;
1 Web 前端模式的演化
要了解 MVVM 模式的由来，我们先来回顾下 Web 前端发展的历史，在 1989 年，物理学家蒂
姆·伯纳斯·李发明了超文本标记语言（HyperText Markup Language），就是现在我们所知道的
HTML.HTML 在1993 年成为互联网草案，最早的 HTML 就只是静态的页面，并不能动态修改
页面的内容，在 1995 年年底，JavaScript 的出现将动态去修改页面变成了现实，到如今的前端
开发模式我们可以分为 4个阶段，具体如下。
（1）js 结合原生的浏览器 API 通过浏览器的机制，可以直接操作页面 DOM.
图1 MVC 模式
图3 MVVM 通信方式
（2）随着 Web 2.0 时代的到来，Web 开发的要求不断提升，ajax 也慢慢流行起来。为了降低跨
浏览器开发的复杂度和考虑各种浏览器兼容性，很多前端类库
（YUI、Dojo、Mootools、Prototype、jQuery）也相继问世，但最终还是 jQuery 以"写得更少，
做得更多",简洁、优雅的设计特点胜出，迅速占领了世界，直到现在还广泛运用。
（3）MVC 模式的诞生，随着前端技术的发展，后台的业务逻辑逐渐向前端转移，只使用
jQuery 可能无法满足越来越复杂的业务需求，尤其在单页面应用上更显得力不从心，于是
Backbone.js 就诞生了，作为前端 MVC 框架的鼻祖，让前端开发的价值上升了一个新的台阶。
（4）MVVM 模式是 Model-View-View Model 模式的简称，借鉴了 MVC 模式的思想，利用数
据驱动视图，达到数据和视图进行完全分离，实现了前后端真正的分离模式，成为如今 Web
开发的主流。
2 MVVM 模式的思想以及与 MVC 的比较
MVVM 模式是从 MVC 发展而来，对比两种模式的工作原理，了解 MVC 框架的缺点能让我们
更好地去认识 MVVM 模式的优势所在。
2.1 MVC 模式
它的原理就是界面展示与数据模型分离，修改展示界面并不需要重新编写业务逻辑。
Model（模型）：模型存放着应用的所有数据对象，因此包含数据和行为，模型不包含视图与
控制器之间的逻辑，但是模型提供了模型数据查询和模型数据的状态更新等功能。
View（视图）：对模型进行视图的展示，视图是展现给用户的，就是我们能见到的页面。
图2 MVC 通信方式
Controller（控制器）：控制器可以理解为是模型与视图的桥梁，集中性地管理事件触发、视图
触发，当页面加载完成时，控制器进行监听交互，做出对视图的选择，委托模型更新数据。
各部分之间的通信方式如下。
View 传送指令到Controller,Controller 完成业务逻辑后要求 Model 改变状态，Model 将新的数据
发送到View,用户得到反馈。
2.2 MVC 模式的缺点
缺点一：控制层和视图层进行耦合，一发而动全身，并没有实现真正的分离和重用。
缺点二：架构以牺牲代码的复杂性为代价，对于小项目降低开发效率。
2.3 MVVM 模式
View 和Model 层没有直接的联系，通过 ViewModel 进行双向交互，实现了真正的前后分离。
View 表示我们网页，Model 表示数据模型，因为 MVVM 的控制器并不会去监听浏览器的事
件，而是监听一个属性表，由浏览器的事件修改属性，以触发控制器中的方法，增加了一层控
制业务的属性，而这层属性被称为 ViewModel,View 与Model 通过 ViewModel 就实现了双向绑
定。
MVVM 模式采用双向绑定（data-binding）：View 和Model 之间的同步工作完全是自动
的，ViewModel 通过双向数据绑定把 View 层和 Model 层连接起，负责把 Model 的数据同步到
View 显示出来，还负责把 View 的修改同步回Model,所以开发者只需要关注自己的业务逻辑。
这也是 MVVM 的核心思想：关注Model 的变化，让 MVVM 框架利用自己的机制去自动更新
DOM,从而把开发者从操作 DOM 的繁琐中解脱出来，不需关注数据状态的同步问题，也就是
所谓的数据和视图分离，数据驱动视图，视图不影响数据。
2.4 MVVM 的优势
（1）低耦合。
视图独立 Model 变化和修改，一个 ViewModel 同时绑定到多个视图上。
（2）可重用性。
可以把View 逻辑放在ViewModel 里面，重用这些视图逻辑。
（3）独立开发。
通过 MVVM,开发人员可以专注于业务逻辑和数据开发在 viewModel 里面，分工更加明确。
3 前端 MVVM 框架的对比
摘要：
展开>>
收起<<
分析Web前端中MVVM框架的关键技术及优势摘要：在互联网技术日新月异的今天，随着Web技术的不断发展，以前的技术无法满足日趋复杂的Web应用，如果还在使用之前老的框架，对View层的操作就会难以维护，这就是前端框架要不断演变的主要原因，前端MVVM框架应运而生，前端模块化开发模式成为现在的主流。该文将重点介绍MVVM框架的发展由来、MVVM模式的工作原理以及和传统的MVC模式进行对比、前端主流MVVM框架的对比、详细分析MVVM框架的关键技术以及优势所在。 关键词：MVC;MVVM;VUE;Web前端；Abstract:WiththerapiddevelopmentofInternette...
相关推荐
-
真空泵三维建模设计及CAD图纸
2023-01-10 316 -
人性化垃圾桶建模及二维图-机械创新设计
2023-01-10 281 -
自动包装机（V带传动说明书+三维+CAD）
2023-05-19 297 -
芋头清洗机（说明书+CAD图纸）
2023-05-19 230
-
手推式电动花生播种机设计[CAD图纸+设计说明书]
2023-05-19 352
-
一种立式机床主轴工作台结构设计8张CAD图纸
2023-05-26 133 -
M7130型卧轴矩台平面磨床-CAD全套图纸
2023-10-03 197 -
机床主轴箱展开图-侧面剖视图-机械毕业设计资料
2023-10-10 80 -
航空管道矫直机送料系统设计-CAD大全-机械毕业设计资料
2023-10-12 162 -
分类垃圾箱CAD图+SW三维设计
2023-10-24 165
作者：闻远设计
分类：课程设计课件资料
价格：2光币
属性：4 页
大小：19.83KB
格式：DOCX
时间：2023-05-18
