Vue对象数据收集依赖具体流程

每一个属性都有一个dep对象,然后这个属性是被观察者,在同一个组件里面,每一个属性都对应到一个统一的watcher,这个watcher就是观察者,如果属性发生了改变,那么这个watcher就会调用get方法去重新渲染虚拟dom替换老的dom .这就是观察者模式

​ 详细解释:在渲染的时候,每一个元素都会有一个对应的dep,然后这个dep在添加的时候id++,这样每给一个属性添加一个dep就会id++,这样id就唯一了.

​ 然后再执行$mount的时候,生成完了ast语法树,new了一个Watcher,在new的时候,Watcher这个对象里面有一些属性,如deps[],depsId(集合),然后在new的时候调用了Watcher原型身上的get方法,这个方法,将当前的Watcher实例对象赋值给了全局的Dep类上面的一个叫target属性,然后在生成虚拟dom时调用了变量的get方法,这个方法例调用了dep对象身上的depend方法,depend方法调用Watcher身上的addDep方法,把自己对应的dep作参传了过去,传过来之后就开始做判断,判断传送过来的dep的id是否存在于Watcher实例对象的这个depsId集合中,如果存在那么就不管了,如果不存在那么就向Watcher实例对象的dep中添加当前对应dep对象.并向集合中添加当前dep对应的id,最后再次调用传送过来的dep实例对象身上的这个addSub方法,将当前对应的Watcher实例对象传送过去,在addSub方法中将这个Watcher实例对象添加到当前所对应的这个dep对象里面.

​ __总结:__在初始化数据的时候给每一个属性都创建一个dep对象,然后利用闭包机制强行将这个dep对象保存在局部中,在生成虚拟dom的过程中,调用了当前dep对象的方法,这个方法利用全局变量Watcher调用了Watcher身上的方法把当前的dep对象传递过去,比较在Watcher中depsId集合中的id和当前dep对应的id,如果存在那么就不管证明了这个属性已经在被Watcher监视,如果没有那么就表示没有监视到当前这个属性,就需要给观察者Watcher中添加这个id和dep,最后传递过来的dep,调用dep身上的方法,将Watcher传送给dep,再将Watcher添加到dep中.这样就实现了Vue的数据依赖收集

​ __注:__这里只说了一个组件的逻辑,dep可能会针对多个组件,所以dep对象当中的subs数组,可能长度不为1,长度可能是>1,但是思路都是一样的

​ __下面说一下自动更新视图的逻辑:__在更改值的时候会调用这个sttter方法,在调用setter的时候会调用对应属性的这个dep身上的notify方法,notify中会拿到其数组中对应的所有watcher实例,然后分别调用每一个watcher实例身上的update方法,这个方法会重新执行一遍上面的__详细解释__里面的逻辑