从源码中学Vue(五 ) 解析「观察者」Watcher做了什么?( 四 )

Dep类是连接Watcher和Observer的桥梁。具体我们通过源码去看下它们三者之间的关系

从源码中学Vue(五 ) 解析「观察者」Watcher做了什么?

它里面有一个subs数组,这个数据就是用来收集watcher,再来看下notify方法,可以看到它最终循环了subs中所有的watcher对象然后依次调用了它们的update方法。

我们也同样很容易想到这个notify通知所有的Watcher方法是在当数据发生变化的时候去调用的,我们找下源码

从源码中学Vue(五 ) 解析「观察者」Watcher做了什么?

再回过头我们去看下watcher的update方法。

先来看run 方法

最终调用的是cb方法,cb顾名思义,它是callback,回调方法。也就是说,在我们初始化Watcher的时候,并不会去主动调用这个cb方法,而是当数据发生变化的时候触发了set,然后再去调用每一个watcher对应的cb回调。

推荐阅读