一、Vue3响应式核心流程

1. reactive()：

   • 通过Proxy代理目标对象
   • 拦截get/set/deleteProperty等操作
   • 使用Reflect执行默认行为

2. 依赖收集：

   • get时通过track函数收集依赖（当前执行的effect）
   • 使用WeakMap建立"target -> key -> dep"的映射关系

3. 触发更新：

   • set时通过trigger函数通知所有依赖更新
   • 采用调度器机制优化执行顺序

二、核心源码片段解析

// reactive实现
function reactive(target) {
  return createReactiveObject(target, reactiveHandlers)
}

// Proxy处理器
const reactiveHandlers = {
  get(target, key, receiver) {
    track(target, get, key) // 依赖收集
    return Reflect.get(...arguments)
  },
  set(target, key, value, receiver) {
    const result = Reflect.set(...arguments)
    trigger(target, set, key) // 触发更新
    return result
  }
}

三、性能优化亮点

1. Proxy代替defineProperty：

   • 无需递归初始化所有属性
   • 完美支持数组和新增属性

2. 依赖存储结构升级：

   • WeakMap避免内存泄漏
   • 依赖关系树形存储

3. effect调度机制：

   • 支持异步批量更新
   • 可自定义调度策略

四、与Vue2对比

提示：调试响应式系统时，可以使用Vue3提供的toRaw()查看原始对象