源代码分析Vue.js监控实现教程

序

我相信说到倾听，离不开设计模式中著名的观察者模式。比如你家后院着火了，但是烟很重，火很亮你才发现。但是，当您安装火灾报警器时，当火灾发生时，您可以立即得到通知。这是典型的观察者模式。当然，还有一些其他的变体，比如发布/订阅模式。

我们知道，如果我们想将数据与视图相关联，当数据发生变化时，视图将被同步，并且数据将随着视图的变化而变化。vue.js是如何做到这一点的？让我们揭开它的神秘面纱。

演示：

脚本src='http:/Vue . js '/script div id=' app ' p { { message } }/p输入v-model=' message '/div script type=' text/JavaScript ' new Vue({ El : ' # app '，data : { message : ' Hello Vue . js！' }});/scriptset:函数reactiveSetter(NewVal){ var value=getter？getter . call(obj): val；if(NewVal===value){ return；} if (setter) { setter.call(obj，newVal)；} else { val=newVal} child ob=observe(NewVal)；dep . notify()；}此代码在解析数据属性时出现，即调用Object.defineProperty方法配置数据的属性。一旦属性改变，notify就会发送一个广播。

dep . prototype . notify=function(){//先稳定订户列表var subs=to array(this . subs)；for (var i=0，l=subs.lengthI l；i ) { subs[i]。update()；}};Notify是一个众所周知的订阅更新，所以上面的数据更改的是发布者。Subscribe是观察器的实例化对象。实例化时，回调函数将被传入以执行更新。vue有一个队列来执行Watcher的更新功能。详情请参考源代码。

watcher . prototype . run=function(){……if(value！==this . value | |(isObject(value)| | this . deep)！this .浅层){ …… } else { this.cb.call(this.vm，value，old value)；} } this . queued=this . shadow=false；} };观察器在指令类中实例化，更新函数负责更新

var watcher=这个。_watcher=new Watcher(this.vm，this.expression，this。_update，//callback { filters : this . filters，twoWay: this.twoWay，deep: this.deep，preProcess: preProcess，postProcess: postProcess，scope: this。_ scope })；当解析模板时，它将解析指令，然后绑定并实例化观察器，这样模板数据将是相关的。

图片描述

观察者模式

许多mvc或mvvm框架基本上使用观察者模式，这也非常有用，尤其是在复杂系统中。

使用观察者模式，在典型的ajax应用程序中，回调处理逻辑不能与请求耦合，这样逻辑会更清晰。下面是一个简单的发布/订阅模式的实现

var PubSub={ }；(函数(q) { var topics={}，SubId=-1；q.publish=function (topic) { if(！topics[topic]){ return false；} var订户=topics[topic]，len=订户？subscribers . length : 0；while(len-){ var args=array . prototype . slice . call(参数，1)；args.unshift(主题)；subscribers[len]. callback . apply(this，args)；}退回这个；};q.subscribe=函数(主题，回调){ if(！topics[topic]){ topics[topic]=[]；} var SubID=(SubID)。toString()；话题[话题]。push({ token: subuid，callback : callback })；返回subuid};q . unsub=function(subid){ for(var k in topics){ if(topics[k]){ for(var I=0，j=topics[k])。长度；I j；i ){ if(主题[k][i]。token===subid){ topics[k]。拼接(I，1)；返回subid} } } }返回此；};})(PubSub)；这是一个简单的订阅发布系统。每次注册订阅者时，它的回调实际上都保存在字典对象数组中。字典对象的键值可以随意定义，只要它对应发布时的键值即可。

怎么用？

脚本var messageLogger=function(){ console。日志(JSON。stringify(参数))；};var subscription=PubSub。subscribe('/new message '，消息记录器)；//{'0':'/newMessage '，' 1 ' : ' hello world ' } PubSub。发布('/new message '，' hello world ')；//{'0':'/newMessage '，' 1':['test '，' a '，' b '，' c ']} PubSub。publish('/newMessage '，['test '，' a '，' b '，' c '])；//{'0':'/newMessage '，' 1 ' : { ' sender ' : ' hello world '，' body ' : ' hey man ' } } PubSub。publish('/new message '，{ sender: 'hello world '，body 3360 ' hey man ' })；PubSub.unsubscribe(订阅);PubSub.publish('/newMessage '，['test '，' a '，' b '，' c']，1)；/script最后一个将不会打印出来，因为已经取消订阅了。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。