深入响应式代理陷阱：自定义Proxy处理器实现细粒度依赖追踪

超越Vue3基础响应式，学习如何通过自定义Proxy处理器劫持get/set/deleteProperty等操作，实现非标准响应式行为（如计算属性的惰性求值、数组索引监听）。 · 难度：入门 · +10XP

深入响应式代理陷阱

Vue3的响应式系统基于Proxy，但大多数教程只使用reactive/ref。本教程将手写一个自定义Proxy处理器，在get陷阱中收集依赖（类似track函数），在set陷阱中触发更新（trigger），并额外实现deleteProperty陷阱以支持对象属性删除的响应式。你还能学会如何通过ownKeys陷阱拦截for...in循环。

function deepProxy(target) {
  const handler = {
    get(target, key, receiver) {
      track(target, key)
      const result = Reflect.get(target, key, receiver)
      if (typeof result === 'object' && result !== null) {
        return new Proxy(result, handler)
      }
      return result
    },
    set(target, key, value, receiver) {
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      if (oldValue !== value) trigger(target, key)
      return result
    },
    deleteProperty(target, key) {
      const hadKey = key in target
      const result = Reflect.deleteProperty(target, key)
      if (hadKey) trigger(target, key)
      return result
    }
  }
  return new Proxy(target, handler)
}