前记:
今天重温vuejs
的响应式,发如今看源码(2.5.17-beta.0
版本)的时候会被某些流程绕晕,特此记下今日所得。
vuejs
实现数据双向绑定离不开发布-订阅者模式,一般会有一个“中间人”负责调度协调发布者与订阅者的关系。在vuejs
中Dep
实例就是“中间人”,负责依赖收集及通知更新的调度工做。大体流程图以下:vue
依次说明一下:spa
Observer
:发布者,负责代理数据的get
和set
属性,使数据的操做具备依赖收集(get
时调用)和变更更新通知(set
时调用)Dep
:中间人,调度发布者与订阅者之间的关系,在Watcher
获取数据时,Observer
通知Dep
收集订阅者,同时订阅者收集依赖;Watcher
:订阅者,视图更新、computed
属性值获取、watch
选项的回调方法的调用会触发Watcher
类的实例方法get()
的执行,获取值的同时收集依赖,并去重同一个更新周期的依赖,避免重复触发render
视图更新;