Vue双向数据绑定原理分析 -- Dep(发布者,订阅收集器)

Vue双向数据绑定原理分析 -- Dep(发布者,订阅收集器)
最新回答
女人绝不认输

2026-10-27 11:51:59

Dep是Observer与Watcher之间的纽带,也 可以认为Dep是服务于Observer的订阅系统 。Watcher订阅某个Observer的Dep,当Observer观察的数据发生变化时,通过Dep通知各个已经订阅的Watcher。

Dep提供了几个接口:

addSub 和 depend这两个方法是用来关联Watcher实例和Dep实例的,这两种实例的关系是多对对的关系:

•  一个Dep实例可以关联多个Watcher实例

•  一个Watcher实例可以关联多个Dep实例

除了这些接口以外,Dep定义了两个实例属性和一个静态属性:

以上这些都很容易理解,难的在于dep.js里面还定义了一个targetStack的东西:

笔者本着求知的精神,千辛万苦终于找到了大神的讲解:

到此为止,我们就明白了Dep类的实现原理,下一篇我们将了解Watcher类的实现。