基于vue的MVVM框架的研究与分析
来源:用户上传
作者:
摘要：互联网的不断发展，前端开发人员一直致力于开发更加高效的代码，由于前期网速以及前端语言的限制，始终得不到解决，近年来，这些问题得到解决后，越来越多的前端框架诞生，这些框架都趋向于工程化，不断提高前端开发者的开发效率以及用户的体验度。该文就近年来出现的MVVM框架中的Vue做出一些深入的研究，解析MVVM框架的原理及实现。
关键词：MVVM；VUE；前端
中图分类号：TP311 文献标识码：A
文章编号：1009-3044（2019）11-0097-02
Abstract： With the continuous development of the Internet， front-end developers have been devoting themselves to developing more efficient code. Because of the limitations of network speed and front-end language， they have not been solved. In recent years， after these problems have been solved， more and more front-end frameworks have been born. These frameworks tend to be engineering， and constantly improve the development efficiency of front-end developers and user experience. This paper makes some in-depth research on Vue in MVVM framework， which appears in recent years， and analyses the principle and implementation of MVVM framework.
Key words： MVVM； VUE； Front-end
1 背景
从早期的静态HTML页面，所有的逻辑运算都由后端进行，到1995年网景推出的JavaScript，逐步在客户端进行部分的逻辑运算，到1999年XMLHTTPRequest的诞生，浏览器异步传输、局部刷新的实现，再到jQuery的出现，浏览器的开发逐步从后端走向前端，到今天，各种MVVM框架顺应时代发展的潮流，引导前端技术走向工程化。
2 MVVM框架的产生
前端的飞速发展，以及互联网时代的到来，一个大型web网站项目需要成千上万个HTML界面组成。前后端的未分离，以及JavaScript与HTML的混合使用，对于网站维护人员来说，无从下手，增加了不必要的难度。web开发者一直寻求属于前端的模块化框架，2009年，AngularJS的诞生，到2011年React和Ember，再到2014年Vue.js的出现，标志著属于前端的工程化框架正在取代以往的开发模式。
3 MVVM框架的组成
MVVM，全名Model-View-ViewModel，前端开发者只用关注数据，使用数据的变化改变DOM，也就是视图的变化，以往的开发模式是开发者在数据改变的时候，手动去操作DOM，这样的开发模式不仅费时费力，维护时更是难上加难。MVVM通过数据的双向绑定，当数据发生变化时，局部界面自动重新渲染，解耦View层，也就是视图层。
3.1 Model
Model层，也就是数据层，用于逻辑处理以及数据的处理。这一层，前端开发者无需关注后端的数据的处理，只需要后端暴露接口，通过后端返回的数据格式，前端开发人员进行相应的数据处理。
3.2 View
视图层，用于展示用户界面，不负责数据的处理，用于数据绑定的声明，指令的声明，事件绑定的声明。
3.3 ViewModel
负责Model层与View层的交互，是其中最重要的一环，将Model的数据进行监听，当数据发生改变时，及时更新视图。这一层由框架封装完成，网站开发人员只需关注Model中数据的处理，实现数据驱动视图。
4 MVVM的优点
1） 低耦合。View层与Model层相互联系，又可以相互独立，数据可以双向绑定又可以单向传递。
2） 组件化。模块化的应用，出现组件的重复利用，同样的视图模板，开发人员可以重复利用，提高开发效率，后期更容易维护。
3） 易于开发。由于数据驱动视图，开发人员更多的重心放在数据的处理与业务逻辑，极大地提高开发效率。
5 实现分析
5.1 发布/订阅者模式
发布/订阅者模式是Vue使用的开发模式，通过订阅者订阅不同的需求，也就是相应的数据处理，发布者将Dep中订阅者依次遍历执行，执行对应的回调函数。
Vue使用Observer监听new Vue（）实例对象，通过Watcher添加对应的订阅者，Dep收集这些订阅者，当Data发生改变时，Observer通知Dep，当前数据绑定的Dep收集器中的订阅者依次执行，实现数据双向绑定。Compile指令解析器解析HTML模板中的指令，将对应的解析函数添加进Dep中，数据发生改变时，相应的解析函数会更新视图。
5.2 Observer的实现
Vue支持IE9及以上，Observer数据监听器使用数据劫持的方式进行数据监听，通过Object.defineProperty（）来重新定义属性的getter和setter。 Object.defineProperty（data，key，{
get：function（）{}，
set：function（）{}
}）
当对应的数据需要相应的对调函数时，在getter中添加对应的订阅者，getter中不再做其他操作，只用来添加对应的数据依赖。
在setter中，其中做了一部分判断，当数据未发生改变时，不做任何操作，提高程序的运算效率，当数据发生改变时，通知Dep（订阅收集器），执行dep.notify（），notify为dep中定义的一个函数，主要用于遍历Dep中的所有订阅者，并执行所有订阅者的回调函数，更新相应的视图。这个过程是Vue的设计核心，在这里通过数据拦截完成订阅者的订阅，发布者在数据改变后，通知所有订阅者。
5.3 Dep的实现
Dep（订阅收集器），顾名思义，用于收集对应的订阅者，它其中主要由subs，addSub，notify以及相应的sub.update组成。
Subs为一个数组，保存所有的订阅者，当添加订阅者时，subs.push（sub）依次添加，每个sub（订阅者）是独立的，它具有相应的update函数，用于更新视图和对应的自定义回调函数。addSub方法用于添加sub，当然需要一个调用这些sub的函数方法，notify方法用于遍历subs，这个方法在数据的setter方法中执行，保证只有数据发生改变，才去通知所有的订阅者。
5.4 Watcher的实现
Dep中已经实现添加订阅者，具体的每个订阅者的实现由Watcher实现。在Observer的getter方法中，执行相应的添加方法，但是如何触发getter方法，保证订阅者只添加一次，Vue在Watcher中做了详细的操作。
function Watcher（vm， exp， cb） {
this.cb = cb；
this.vm = vm；
this.exp = exp；
this.value = this.get（）； // 将自己添加到订阅器的操作
}
Watcher.prototype={
update：function（）{}，
run：function（）{}，
get：function（）{}
}
通過new Watcher（），首先缓存自己，保证在Observer的getter方法执行时，将自己添加到Dep中，当添加完成之后，释放自己，当前属性再次获取时，不会二次添加进Dep中。由于传入到Observer的是当前new Watcher（）实例，在Dep收集器中的每个sub（订阅者）都是一个new Watcher（）实例对象，每个实例定义它的回调函数update，在update中执行当前订阅者的需求。到这一步，基本实现了数据拦截，数据改变驱动订阅者方法的执行。
5.5 Compile的实现
Compile（指令解析器），以上已经实现了双向绑定，但是整个过程并没有去改变DOM，只是实现了数据的双向绑定，界面并没有发生实际的改变。所以需要一个Compile来解析和绑定DOM。
首先需要获取当前的DOM对象，由于操作DOM过于频繁会影响浏览器的渲染速度，在Vue出现了虚拟DOM，它主要是将对应的DOM对象转为js对象，首先去改变js对象，当js对象发生改变时，再去操作DOM改变。
接下来需要遍历虚拟DOM中的各个节点，这里我们只负责研究它的双向绑定，对其中的{{}}进行解析，对其中的数据进行new Watcher（）操作，并给Watcher更新视图的回调函数。这样，数据的双向绑定就完成了，当界面的input内容发生改变时，js数据也发生改变，同理，数据发生改变时，界面也同时发生渲染。
6 结束语
前端的发展已经是趋势，MVVM框架已经占据了大部分市场，前端开发者不再去写重复的HTML元素，不用一遍又一遍获取DOM，操作DOM，既提高了开发效率，又提高了用户的使用体验。SPA（单页面）应用越来越多，HTML5的跨终端性，让现在MVVM框架走向移动开发，资源只需加载一次，不仅仅是PC，它在逐渐替代传统的APP，未来的前端越来越趋向于大前端。
参考文献：
[1] 孙连山， 李云倩. MVVM框架在Web前端的应用研究[D]. 上海： 复旦大学， 2014.
[2] 刘立. MVVM 模式分析与应用[J]. 微型电脑应用， 2012， 28（12）： 57-60.
[3] 何焕春， 杨怿. 基于MVVM构架的Web前端框架研究[J]. 电脑知识与技术， 2017， 13（24）：59-60.
[4] 莫文水. Web前端中MVVM框架的应用研究[J]. 网络安全技术与应用， 2017（4）： 64.
[5] 易剑波. 基于MVVM模式的WEB前端框架的研究[J]. 信息与电脑： 理论版， 2016（19）： 76-77， 84.
【通联编辑：谢媛媛】
转载注明来源:https://www.xzbu.com/8/view-14769869.htm
