@H_502_0@//先看一例子 importVuefrom'./instance/vue' letv=newVue({ data:{ a:1,b:{ c:3 } } }) console.log(v.b.c);//3 v.$watch("b.c",(newVal,oldVal)=>console.log('newVal',newVal,'oldVal',oldVal,'\n'));//1秒后newVal{d:[Getter/Setter]}oldVal3 v.$watch("b.c.d",'\n'))//2秒后newVal5oldVal4 setTimeout(()=>{ v.b.c={d:4}; },1000) setTimeout(()=>{ v.b.c.d=5 },2000)

click here 可运行的 example

（以下都是简化的代码，实际的源码复杂许多）首先是让vue本身对data引用，以及添加$watch方法：

@H_502_0@importWatcherfrom'../watcher' import{observe}from"../observer" exportdefaultclassVue{ constructor(options={}){ this.$options=options letdata=this._data=this.$options.data //shallowiteratethroughkeystogivevuedirectreference Object.keys(data).forEach(key=>this._proxy(key)) //deepiteratethroughallkeystoproxyallkeys observe(data,this) } $watch(expOrFn,cb,options){ newWatcher(this,expOrFn,cb) } _proxy(key){ varself=this Object.defineProperty(self,key,{ configurable:true,enumerable:true,get:functionproxyGetter(){ returnself._data[key] },set:functionproxySetter(val){ self._data[key]=val } }) } }

接着实现深度代理函数observe，递归代理所有属性，从而监测所有属性的变化:

@H_502_0@import{def}from"../util" importDepfrom"./dep" exportdefaultclassObserver{ constructor(value){ this.value=value this.walk(value) } //deepobserveeachkey walk(value){ Object.keys(value).forEach(key=>this.convert(key,value[key])) } convert(key,val){ defineReactive(this.value,val) } } exportfunctiondefineReactive(obj,val){ vardep=newDep() //recursiveobserveallkeys varchildOb=observe(val) Object.defineProperty(obj,{ enumerable:true,configurable:true,get:()=>{ //checkdependencytosubscribe if(Dep.target){ dep.addSub(Dep.target) } returnval },set:newVal=>{ varvalue=val if(newVal===value){ return } val=newVal //checkchangetoreobserveandpublishalldependencies childOb=observe(newVal) dep.notify() } }) } exportfunctionobserve(value,vm){ if(!value||typeofvalue!=='object'){ return } returnnewObserver(value) }

实现依赖处理：

@H_502_0@//import{toArray}from'../util/index' letuid=0 /** *Adepisanobservablethatcanhavemultiple *directivessubscribingtoit. * *@constructor */ exportdefaultfunctionDep(){ this.id=uid++ this.subs=[] } //thecurrenttargetwatcherbeingevaluated. //thisisgloballyuniquebecausetherecouldbeonlyone //watcherbeingevaluatedatanytime. Dep.target=null /** *Addadirectivesubscriber. * *@param{Directive}sub */ Dep.prototype.addSub=function(sub){ this.subs.push(sub) } /** *Removeadirectivesubscriber. * *@param{Directive}sub */ Dep.prototype.removeSub=function(sub){ //this.subs.$remove(sub) } /** *Addselfasadependencytothetargetwatcher. */ Dep.prototype.depend=function(){ Dep.target.addDep(this) } /** *Notifyallsubscribersofanewvalue. */ Dep.prototype.notify=function(){ //stablizethesubscriberlistfirst varsubs=(this.subs) for(vari=0,l=subs.length;i<l;i++){ subs[i].update() } }

实现watch：

@H_502_0@importDepfrom'./observer/dep' exportdefaultclassWatcher{ constructor(vm,cb){ this.cb=cb this.vm=vm this.expOrFn=expOrFn this.value=this.get() } update(){ this.run() } run(){ constvalue=this.get() if(value!==this.value){//checkisEqualifnotthencallback this.cb.call(this.vm,value,this.value) this.value=value } } addDep(dep){ dep.addSub(this) } get(){ this.beforeGet(); console.log('\n','watchget'); //fnorexpr varres=this.vm._data,key=[]; console.log('expOrFn',this.expOrFn) //towatchinstancelikea.b.c if(typeofthis.expOrFn=='string'){ this.expOrFn.split('.').forEach(key=>{ res=res[key]//eachwillinvokegetter,sinceDep.targetistrue,thiswillsurelyaddthisintodep }) } this.afterGet(); returnres } } /** *Preparefordependencycollection. */ Watcher.prototype.beforeGet=function(){ Dep.target=this; }; /** *Cleanupfordependencycollection. */ Watcher.prototype.afterGet=function(){ Dep.target=null; };

以上示例是可以无依赖直接运行的。

接下来是vue的源码片段；

一般对象的处理可以直接代理defineProperty就可以了，不过对于Array的各种操作就不管用了，所以vue进行了基本数组方法代理：

@H_502_0@functiondef(obj,val,enumerable){ Object.defineProperty(obj,{ value:val,enumerable:!!enumerable,writable:true,configurable:true }) } functionindexOf(arr,obj){ vari=arr.length while(i--){ if(arr[i]===obj)returni } return-1 } constarrayProto=Array.prototype exportconstarrayMethods=Object.create(arrayProto) ;[ 'push','pop','shift','unshift','splice','sort','reverse' ] .forEach(function(method){ //cacheoriginalmethod varoriginal=arrayProto[method] def(arrayMethods,method,functionmutator(){ //avoidleakingarguments: //http://jsperf.com/closure-with-arguments vari=arguments.length varargs=newArray(i) while(i--){ args[i]=arguments[i] } varresult=original.apply(this,args) varob=this.__ob__ varinserted switch(method){ case'push': inserted=args break case'unshift': inserted=args break case'splice': inserted=args.slice(2) break } //sameasobjectchange //checkchangetoreobserveandpublishalldependencies if(inserted)ob.observeArray(inserted) //notifychange ob.dep.notify() returnresult }) }) //es5defineProperty对于数组的某些操作和属性（如：length）变化代理有问题，所以需要使用定义的方法操作 具体原因看http://www.cnblogs.com/ziyunfei/archive/2012/11/30/2795744.html和 http://wiki.jikexueyuan.com/project/vue-js/practices.html def( arrayProto,'$set',function$set(index,val){ if(index>=this.length){ this.length=Number(index)+1 } returnthis.splice(index,1,val)[0]//在里面还是通过代理方法splice实现 } ) def( arrayProto,'$remove',function$remove(item){ /*istanbulignoreif*/ if(!this.length)return varindex=indexOf(this,item) if(index>-1){ returnthis.splice(index,1) } } )

看实际的observer干了什么：

@H_502_0@constarrayKeys=Object.getOwnPropertyNames(arrayMethods) exportfunctionObserver(value){ this.value=value this.dep=newDep() def(value,'__ob__',this) if(isArray(value)){ varaugment=hasProto//hasProo='__prop__'in{};__prop__只在某些浏览器才暴漏出来 ?protoAugment//直接将value.__proto__=src :copyAugment//直接改变本身方法 augment(value,arrayMethods,arrayKeys) this.observeArray(value) }else{ this.walk(value) } } functioncopyAugment(target,src,keys){ for(vari=0,l=keys.length;i<l;i++){ varkey=keys[i] def(target,src[key]) } } functionprotoAugment(target,src){ target.__proto__=src }

总的来说，vue是代理了原始数据的增删改查，从而进行事件订阅和发布等操作，从而控制数据流。

heavily inspired by：https://segmentfault.com/a/1190000004384515