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

描述
依赖收集与响应式是现代前端框架的核心机制，它实现了数据变化时视图的自动更新。当数据被访问时，框架会自动记录依赖关系；当数据修改时，框架会通知所有依赖该数据的组件进行更新。这个机制避免了手动操作DOM的繁琐，提升了开发效率。

核心概念

• 响应式数据：数据变化能自动触发相关操作
• 依赖（Watcher/Effect）：使用响应式数据的代码单元（如组件渲染函数）
• 依赖收集：建立数据与依赖的对应关系

实现步骤详解

1. 使数据变成响应式
核心是通过Object.defineProperty或Proxy拦截数据的读写操作。

// 使用Proxy实现响应式
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
    }
  })
}

2. 依赖收集机制

• 需要一个全局变量记录当前正在执行的依赖
• 建立target->key->deps的映射关系

let activeEffect = null
const targetMap = new WeakMap() // 存储依赖关系

function track(target, key) {
  if (!activeEffect) return
  
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap)
  }
  
  let deps = depsMap.get(key)
  if (!deps) {
    deps = new Set()
    depsMap.set(key, deps)
  }
  
  deps.add(activeEffect) // 记录依赖关系
}

3. 依赖触发机制
当数据变化时，找到所有依赖该数据的effect并执行。

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  
  const deps = depsMap.get(key)
  if (deps) {
    deps.forEach(effect => effect()) // 执行所有依赖函数
  }
}

4. 定义依赖（Effect）
创建一个响应式副作用函数，在函数执行时建立依赖关系。

function effect(fn) {
  const effectFn = () => {
    activeEffect = effectFn
    fn()
    activeEffect = null
  }
  effectFn() // 立即执行以收集依赖
}

5. 完整示例演示

// 创建响应式数据
const state = reactive({ count: 0, name: 'vue' })

// 定义依赖（类似组件渲染函数）
effect(() => {
  console.log(`Count发生了变化: ${state.count}`)
})

effect(() => {
  console.log(`Name发生了变化: ${state.name}`)
})

// 测试
state.count++ // 触发第一个effect
state.name = 'react' // 触发第二个effect

6. 框架中的实际应用
在Vue 3中的具体实现：

import { reactive, effect } from 'vue'

const component = {
  setup() {
    const state = reactive({ count: 0 })
    
    // 模拟模板渲染
    effect(() => {
      console.log(`渲染组件，count: ${state.count}`)
    })
    
    return { state }
  }
}

// 数据变化触发重新渲染
component.state.count++ // 自动触发effect执行

7. 优化机制
实际框架还会包含以下优化：

• 依赖清理：避免重复收集过期依赖
• 调度控制：批量更新避免频繁重渲染
• 嵌套处理：支持组件嵌套场景
• 条件分支：动态处理条件渲染的依赖

总结
依赖收集与响应式原理通过拦截数据访问建立依赖关系，在数据变化时精准通知相关依赖更新。这种机制实现了声明式编程范式，让开发者只需关注数据变化，框架自动处理视图更新，大大提升了开发效率和代码可维护性。