响应式依赖收集的实现原理

考察点分析 link

核心能力维度：Vue响应式原理理解、设计模式应用、对象属性劫持机制

具体技术评估点：

1. Object.defineProperty的getter/setter实现原理
2. Dep类与Watcher类的协作关系（发布-订阅模式）
3. 依赖收集触发时机与闭包的应用
4. 组件渲染与更新队列的批处理机制
5. 多层级属性劫持的边界情况处理

技术解析 link

关键知识点 link

Dep/Watcher机制 > 数据劫持 > 异步更新队列

原理剖析 link

1. 数据劫持：通过Object.defineProperty为每个响应式对象的属性创建闭包环境，内部维护一个Dep实例
2. 依赖收集：当属性被读取时，触发getter将当前Watcher（通过Dep.target标记）收集到Dep的订阅队列中
3. 订阅关系：每个Watcher对应一个组件渲染、计算属性或自定义watch回调，保存着更新函数
4. 派发更新：属性修改触发setter，通过Dep.notify()通知所有关联Watcher加入异步更新队列

  // Dep类伪代码
class Dep {
  static target = null // 全局标记位
  subs = []

  depend() {
    if (Dep.target) {
      this.subs.add(Dep.target)
      Dep.target.addDep(this) // 双向记录
    }
  }

  notify() {
    subs.forEach(watcher => watcher.update())
  }
}

// Watcher伪代码
class Watcher {
  constructor(getter, callback) {
    this.getter = getter
    this.callback = callback
    this.value = this.get()
  }

  get() {
    Dep.target = this
    const value = this.getter() // 触发getter
    Dep.target = null
    return value
  }

  update() {
    queueWatcher(this) // 加入异步队列
  }
}
  

常见误区 link

• 误认为每个Vue实例只有一个Watcher（实际每个组件独立Watcher）
• 混淆同步更新与异步批处理的执行顺序
• 未处理嵌套对象属性的依赖收集（需递归劫持）

问题解答 link

Vue的依赖收集通过以下链路实现：

1. 数据初始化：通过Object.defineProperty为每个属性创建getter/setter，每个属性闭包内维护一个Dep类实例
2. 读取触发：当组件渲染或计算属性计算时，会创建Watcher实例并立即执行其get方法，此时Dep.target指向该Watcher
3. 依赖收集：属性被读取触发getter，调用dep.depend()将Dep.target（当前Watcher）存入Dep的subs数组，同时Watcher记录关联的Dep
4. 更新触发：属性被修改时触发setter，调用dep.notify()遍历subs中的Watcher，将其加入异步队列等待批量更新
5. 队列处理：通过nextTick将队列中的Watcher按优先级排序后执行更新回调，触发组件重新渲染或watch回调

解决方案 link

  // 简化版响应式实现
function defineReactive(obj, key) {
  const dep = new Dep()
  let value = obj[key]

  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) {
        dep.depend()
      }
      return value
    },
    set(newVal) {
      if (value === newVal) return
      value = newVal
      dep.notify()
    }
  })
}

// 使用示例
const data = { count: 0 }
defineReactive(data, 'count')

new Watcher(() => {
  console.log('当前值:', data.count)
}, () => { /* 更新回调 */ })
  

复杂度优化：

• 通过异步队列避免重复计算（O(n)时间复杂度优化为单次批量处理）
• 依赖清理机制防止内存泄漏（组件卸载时移除无用Watcher）

可扩展性：

• 针对大型对象采用惰性劫持（仅在访问时递归）
• 兼容Proxy实现（Vue3）时通过WeakMap优化内存

深度追问 link

1. 如何避免重复收集相同依赖？

   • Watcher与Dep双向记录，通过id去重

2. 数组类型如何劫持？

   • 重写数组方法并添加dep.notify()

3. nextTick实现原理？

   • 优先使用Promise微任务，降级到setTimeout