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