基于vue的MVVM框架的研究与分析.doc

基于vue的MVVM框架的研究与分析
摘要:互联网的不断发展,前端开发人员一直致力于开发更加高效的代码,由于前期网速以及前端语言的限制,始终得不到解决,近年来,这些问题得到解决后,越来越多的前端框架诞生,这些框架都趋向于工程化,据的处理与业务逻辑,极大地提高开发效率。
5 实现分析
发布/订阅者模式
发布/订阅者模式是Vue使用的开发模式,通过订阅者订阅不同的需求,也就是相应的数据处理,发布者将Dep中订阅者依次遍历执行,执行对应的回调函数。
Vue使用Observer监听new Vue()实例对象,通过Watcher添加对应的订阅者,Dep收集这些订阅者,当Data发生改变时,Observer通知Dep,当前数据绑定的Dep收集器中的订阅者依次执行,实现数据双向绑定。Compile指令解析器解析HTML模板中的指令,将对应的解析函数添加进Dep中,数据发生改变时,相应的解析函数会更新视图。
Observer的实现
Vue支持IE9及以上,Observer数据***使用数据劫持的方式进行数据监听,()来重新定义属性的getter和setter。 (data,key,{
get:function(){},
set:function(){}
})
当对应的数据需要相应的对调函数时,在getter中添加对应的订阅者,getter中不再做其他操作,只用来添加对应的数据依赖。
在setter中,其中做了一部分判断,当数据未发生改变时,不做任何操作,提高程序的运算效率,当数据发生改变时,通知Dep(订阅收集器),(),notify为dep中定义的一个函数,主要用于遍历Dep中的所有订阅者,并执行所有订阅者的回调函数,更新相应的视图。这个过程是Vue的设计核心,在这里通过数据拦截完成订阅者的订阅,发布者在数据改变后,通知所有订阅者。
Dep的实现
Dep(订阅收集器),顾名思义,用于收集对应的订阅者,它其中主要由subs,addSub,。
Subs为一个数组,保存所有的订阅者,当添加订阅者时,(sub)依次添加,每个sub(订阅者)是独立的,它具有相应的update函数,用于更新视图和对应的自定义回调函数。addSub方法用于添加sub,当然需要一个调用这些sub的函数方法,notify方法用于遍历subs,这个方法在数据的setter方法中执行,保证只有数据发生改变,才去通知所有的订阅者。
Watcher的实现
Dep中已经实现添加订阅者,具体的每个订阅者的实现由Watcher实现。在Observer的getter方法中,执行相应的添加方法,但是如何触发getter方法,保证订阅者只添加一次,Vue在Watcher中做了详细的操作。
function Watcher(vm, exp, cb) {
=cb;
=vm;
=exp;
t