1
前记:
今天重温vuejs的响应式,发现在看源码(2.5.17-beta.0版本)的时候会被某些流程绕晕,特此记下今日所得。

vuejs实现数据双向绑定离不开发布-订阅者模式,通常会有一个“中间人”负责调度协调发布者与订阅者的关系。在vuejsDep实例就是“中间人”,负责依赖收集及通知更新的调度工作。大致流程图如下:

Vuejs响应式.png

依次说明一下:

  • Observer发布者,负责代理数据的getset属性,使数据的操作具有依赖收集(get时调用)和变动更新通知(set时调用)
  • Dep中间人,调度发布者与订阅者之间的关系,在Watcher获取数据时,Observer通知Dep收集订阅者,同时订阅者收集依赖;
  • Watcher订阅者,视图更新、computed属性值获取、watch选项的回调方法的调用会触发Watcher类的实例方法get()的执行,获取值的同时收集依赖,并去重同一个更新周期的依赖,避免重复触发render视图更新;

Juven
127 声望4 粉丝