Web前端中基于MVVM框架的技术应用研究朱海萍丁西刘链摘要：在互联网技术日新月异的今天，随着Web技术的不断发展，以前的技术无法满足日趋复杂的Web应用，如果还在使用之前老的框架，对View层的操作就会难以维护，这就是前端框架要不断演变的主要原因，前端MVVM框架应运而生，前端模块化开发模式成为现在的主流。该文将重点介绍MVVM框架的发展由来、MVVM模式的工作原理以及和传统的MVC模式进行对比、前端主流MVVM框架的对比、详细分析MVVM框架的关键技术以及优势所在。关键词：MVCMVVMVUEWeb前端：TP393.09文献标识码：A：1672-3791（2020）10（c）-0008-03Abstract：WiththerapiddevelopmentofInternettechnologytoday，withthecontinuousdevelopmentofwebtechnology，theprevioustechnologycannotmeettheincreasinglycomplexwebapplications.Ifyoustillusetheoldframeworkbefore，theoperationoftheViewlayerwillbedifficulttomaintain.Thisisthefrontendthemainreasonforthecontinuousevolutionoftheframeworkisthatthefront-endMVVMframeworkcameintobeing，andthefront-endmodulardevelopmentmodelhasbecomethemainstream.ThiswillfocusontheoriginofthedevelopmentoftheMVVMframework，theworkingprincipleoftheMVVMmodelandthecomparisonwiththetraditionalMVCmodelparisonofmainstreamMVVMframework，detailedanalysisofthekeytechnologiesandadvantagesofMVVMframework.KeyWords：MVC;MVVM;VUE;Webfrontend1Web前端模式的演化要了解MVVM模式的由來，我们先来回顾下Web前端发展的历史，在1989年，物理学家蒂姆·伯纳斯·李发明了超文本标记语言（HyperTextMarkupLanguage），就是现在我们所知道的HTML。HTML在1993年成为互联网草案，最早的html就只是静态的页面，并不能动态修改页面的内容，在1995年年底，JavaScript的出现将动态去修改页面变成了现实，到如今的前端开发模式我们可以分为4个阶段，具体如下。（1）js结合原生的浏览器API通过浏览器的机制，可以直接操作页面DOM。（2）随着Web2.0时代的到来，Web开发的要求不断提升，ajax也慢慢流行起来。为了降低跨浏览器开发的复杂度和考虑各种浏览器兼容性，很多前端类库（YUI、Dojo、Mootools、Prototype、jQuery）也相继问世，但最终还是jQuery以“写得更少，做得更多”，简洁、优雅的设计特点胜出，迅速占领了世界，直到现在还广泛运用。（3）MVC模式的诞生，随着前端技术的发展，后台的业务逻辑逐渐向前端转移，只使用jquery可能无法满足越来越复杂的业务需求，尤其在单页面应用上更显得力不从心，于是Backbone.js就诞生了，作为前端MVC框架的鼻祖，让前端开发的价值上升了一个新的台阶。（4）MVVM模式是Model-View-ViewModel模式的简称，借鉴了MVC模式的思想，利用数据驱动视图，达到数据和视图进行完全分离，实现了前后端真正的分离模式，成为如今Web开发的主流。2MVVM模式的思想以及与MVC的比较MVVM模式是从MVC发展而来，对比两种模式的工作原理，了解MVC框架的缺点能让我们更好地去认识MVVM模式的优势所在。2.1MVC模式它的原理就是界面展示与数据模型分离，修改展示界面并不需要重新编写业务逻辑。Model（模型）：模型存放着应用的所有数据对象，因此包含数据和行为，模型不包含视图与控制器之间的逻辑，但是模型提供了模型数据查询和模型数据的状态更新等功能。View（视图）：对模型进行视图的展示，视图是展现给用户的，就是我们能见到的页面。Controller（控制器）：控制器可以理解为是模型与视图的桥梁，集中性地管理事件触发、视图触发，当页面加载完成时，控制器进行监听交互，做出对视图的选择，委托模型更新数据。各部分之间的通信方式如下。View传送指令到Controller，Controller完成业务逻辑后要求Model改变状态，Model将新的数据发送到View，用户得到反馈。2.2MVC模式的缺点缺点一：控制层和视图层进行耦合，一发而动全身，并没有实现真正的分离和重用。缺点二：架构以牺牲代码的复杂性为代价，对于小项目降低开发效率。2.3MVVM模式View和Model层没有直接的联系，通过ViewModel进行双向交互，实现了真...