Vue.js响应式数据劫持原理中依赖收集器Dep类逻辑实现-Vue.js-PHP中文网

vue.js 2.x 的响应式核心依赖 object.defineproperty 劫持属性，并通过 dep 类实现依赖收集与通知更新；dep 为每个响应式属性提供独立订阅通道，在 getter 中收集 watcher、setter 中通知更新，支持去重与清理，但存在无法监听动态操作等局限，vue 3 改用 proxy 重构。

vue.js响应式数据劫持原理中依赖收集器dep类逻辑实现

Vue.js 2.x 的响应式核心依赖于 Object.defineProperty 对数据属性进行劫持，并通过 Dep（Dependency）类 实现依赖收集与通知更新。Dep 类本身不直接存储 watcher，而是作为“依赖管理中枢”，为每个响应式属性（或 computed、watch 等）提供独立的订阅通道。

Dep 类的核心职责

Dep 是一个简单的发布-订阅容器，每个被 defineProperty 劫持的响应式属性都拥有一个专属 Dep 实例。它的主要作用是：

在 getter 中收集当前正在求值的 Watcher（即“谁在读这个属性”）
在 setter 中通知所有已收集的 Watcher 执行更新（即“谁需要重新计算”）
避免重复添加同一 Watcher，支持依赖清理（如组件卸载时）

Dep 类的基本结构与关键方法

简化版实现如下（贴近 Vue 2 源码逻辑）：

class Dep {
  constructor() {
    this.id = uid++ // 全局唯一标识，用于去重和调试
    this.subs = []  // 存储所有依赖该属性的 Watcher 实例
  }
<p>// 添加一个 watcher 到订阅列表（带去重）
addSub(sub) {
if (sub && !this.subs.includes(sub)) {
this.subs.push(sub)
}
}</p><p>// 移除一个 watcher（例如组件销毁时调用）
removeSub(sub) {
const index = this.subs.indexOf(sub)
if (index > -1) {
this.subs.splice(index, 1)
}
}</p><p>// 通知所有 watcher 更新（触发 update 方法）
notify() {
const subs = this.subs.slice() // 避免遍历时数组被修改
for (let i = 0; i </p><p>// 全局静态属性：当前正在求值的 watcher（由 pushTarget / popTarget 控制）
Dep.target = null
</p>

注意：Dep.target 是关键桥梁——它在依赖收集阶段临时保存当前活跃的 Watcher，使得 getter 能知道“该把谁加进 subs”。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

Dep 如何与 defineProperty 和 Watcher 协同工作

整个流程依赖三者配合：

defineProperty 的 getter：当访问响应式属性时触发，内部调用 dep.depend()（即 dep.addSub(Dep.target)），将当前 Watcher 记录下来
Watcher 构造时：会主动触发一次 get，使自身成为 Dep.target，从而完成初次依赖收集
defineProperty 的 setter：触发 dep.notify()，逐个唤醒 subs 中的 Watcher 执行异步更新（如 queueWatcher）

例如：data: { count: 1 }，模板中用了 {{ count }}，渲染时访问 count 触发 getter → 收集渲染 Watcher 到该属性对应的 Dep → 后续 count = 2 触发 setter → 通知该 Dep 下所有 Watcher 重新渲染。