前端框架中的依赖收集与响应式原理详解

描述
依赖收集是响应式系统的核心机制，它通过自动追踪数据依赖关系，在数据变化时精确通知相关视图进行更新。现代前端框架（Vue、SolidJS等）都基于此原理实现数据驱动视图。

核心概念

1. 响应式数据：被监听的数据对象，变化时能触发更新
2. 依赖（订阅者）：使用响应式数据的代码（如渲染函数、计算属性）
3. 依赖收集：建立数据与依赖的映射关系

实现步骤详解

第一步：创建响应式数据

// 基础响应式实现
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      // 追踪依赖
      track(target, key)
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver)
      // 触发更新
      trigger(target, key)
      return result
    }
  })
}

第二步：实现依赖追踪系统

// 存储依赖关系的数据结构
const targetMap = new WeakMap() // 目标对象 -> 键 -> 依赖集合
let activeEffect = null // 当前正在执行的依赖

function track(target, key) {
  if (!activeEffect) return
  
  // 获取目标对象的依赖映射
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap)
  }
  
  // 获取具体属性的依赖集合
  let dep = depsMap.get(key)
  if (!dep) {
    dep = new Set()
    depsMap.set(key, dep)
  }
  
  // 添加当前依赖
  dep.add(activeEffect)
}

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  
  const dep = depsMap.get(key)
  if (dep) {
    // 触发所有相关依赖重新执行
    dep.forEach(effect => effect())
  }
}

第三步：定义依赖（副作用函数）

function effect(fn) {
  // 包装为可执行的依赖函数
  const effectFn = () => {
    activeEffect = effectFn
    fn()
    activeEffect = null
  }
  effectFn()
}

// 使用示例
const state = reactive({ count: 0, name: 'vue' })

// 定义依赖（渲染函数）
effect(() => {
  console.log(`Count: ${state.count}`) // 自动追踪state.count的依赖
})

state.count++ // 触发console.log重新执行

第四步：依赖清理机制

function effect(fn) {
  const effectFn = () => {
    // 执行前清理旧依赖
    cleanup(effectFn)
    activeEffect = effectFn
    fn()
    activeEffect = null
  }
  effectFn.deps = [] // 存储该依赖所属的所有依赖集合
  effectFn()
}

function cleanup(effectFn) {
  // 从所有依赖集合中移除该依赖
  effectFn.deps.forEach(dep => dep.delete(effectFn))
  effectFn.deps.length = 0
}

// 更新track函数
function track(target, key) {
  if (!activeEffect) return
  // ...原有逻辑...
  dep.add(activeEffect)
  // 同时记录依赖所属的集合（用于清理）
  activeEffect.deps.push(dep)
}

第五步：分支切换优化

// 处理条件语句导致的依赖变化
const state = reactive({ isShow: true, showText: 'A', hideText: 'B' })

effect(() => {
  console.log(state.isShow ? state.showText : state.hideText)
  // 当isShow变化时，依赖关系需要重新收集
})

state.isShow = false // 此时不再需要showText的依赖

第六步：嵌套依赖处理

const effectStack = [] // 依赖调用栈

function effect(fn) {
  const effectFn = () => {
    cleanup(effectFn)
    activeEffect = effectFn
    effectStack.push(effectFn) // 入栈
    fn()
    effectStack.pop() // 出栈
    activeEffect = effectStack[effectStack.length - 1] // 恢复上一个依赖
  }
  effectFn.deps = []
  effectFn()
}

实际框架中的差异

Vue 2的实现

// 基于Object.defineProperty
function defineReactive(obj, key, val) {
  const dep = new Dep() // 每个属性一个Dep实例
  
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) {
        dep.depend() // 收集依赖
      }
      return val
    },
    set(newVal) {
      val = newVal
      dep.notify() // 触发更新
    }
  })
}

Vue 3的优化

1. 使用Proxy代理整个对象，无需递归遍历
2. 支持数组索引修改、length修改的监听
3. 更好的性能表现

总结
依赖收集通过建立数据与依赖的精确映射，实现高效的响应式更新。核心在于：

1. 拦截数据访问（getter）时收集当前依赖
2. 数据修改（setter）时触发相关依赖
3. 完善的依赖管理（清理、嵌套、分支切换）

这种机制确保了数据变化时，只有真正依赖该数据的视图才会更新，达到精准高效的渲染效果。