vue3暗影代理：非原始值的响应式迷局

序幕：Vue 2 的诅咒

在 Vue 2 的年代，开发者们生活在一种微妙的恐惧中。当你写下 this.obj.newKey = 'value' 时，视图不会更新；当你删除一个属性时，框架沉默不语。那是 Object.defineProperty 的诅咒------它只能监视已经存在的属性，对"生杀予夺"无能为力。

直到 Proxy 的出现。它不像前任那样被动地守着已有领地，而是直接冒充 目标对象，拦截一切来犯之敌。但这股力量太危险了------它不仅能拦截 obj.foo，还能拦截 in 操作符、for...in 循环，甚至 delete。如何驾驭这股力量而不被反噬？这就是本章的迷局。

5.1 替身与本体：Proxy 和 Reflect 的谍战

陷阱：当"读取"不是简单的读取

想象你正在开发一个间谍系统。特工（Proxy）伪装成目标人物（原始对象），每次有人询问目标"你的银行账户是多少"（obj.foo），特工需要先记录提问者是谁（依赖收集），再回答。

但这里有个致命漏洞：如果目标人物本身是个"滑头"（访问器属性 getter），它会根据提问者的身份改变答案？

const target = {
  _secret: 1,
  get secret() {
    // 这个 this 指向谁，决定了回答什么
    return this._secret
  }
}

// 如果不加干预
const spy = new Proxy(target, {
  get(target, key) {
    // 致命错误：你直接问了目标本人，而不是让特工去套话！
    return target[key]  // ❌ 这里 target[key] 的 this 指向 target
  }
})

灾难现场 ：当你在副作用函数中读取 spy.secret，Vue 以为你在访问 secret，但实际上 getter 内部访问的是 _secret。由于你直接让目标回答了问题（target[key]），Vue 错过了 _secret 的依赖收集。当你修改 spy._secret 时，副作用函数不会更新！

破局：Reflect 的"指鹿为马"

Reflect.get 的第三个参数 receiver 就是这场谍战的关键------它允许你指定 getter 函数执行时的 this 指向。

const spy = new Proxy(target, {
  get(target, key, receiver) {
    // 🕵️ 策略：告诉目标，"有人问了你这个问题，但请把特工（receiver）当成你自己"
    track(target, key)
    return Reflect.get(target, key, receiver)  // ✅ receiver 是 Proxy 实例
  }
})

现在，当 getter 执行 this._secret 时，这个 this 指向的是 Proxy 实例 而非原始对象！于是 Vue 能够追踪到 _secret 的访问，建立起真正的依赖关系。

技术内幕 ：这就是为什么 Vue 3 的响应式系统必须使用 Reflect.* 方法。这不是可选项，而是正确性要求。

5.2 语言的暗面：JavaScript 对象的"基本语义"

JavaScript 引擎内部，所有对象操作都遵循基本语义（Essential Internal Methods）。就像物理定律一样，它们不可违背，但可以被"扭曲"。

操作	引擎内部调用	Proxy 拦截器	危险性
obj.foo	[[Get]]	get	⭐⭐
obj.foo = 1	[[Set]]	set	⭐⭐⭐
'foo' in obj	[[HasProperty]]	has	⭐⭐
for (k in obj)	[[OwnPropertyKeys]]	ownKeys	⭐⭐⭐⭐
delete obj.foo	[[Delete]]	deleteProperty	⭐⭐⭐

关键洞察 ：Vue 的响应式系统本质上是在重定义这些基本语义------在原始语义之上叠加"依赖收集"和"触发更新"的副作用。

异质对象（Exotic Objects）的叛乱

数组和 Proxy 都属于异质对象 ------它们不遵循常规对象的内部方法实现。特别是数组的 [[DefineOwnProperty]]，它会在你设置索引时自动更新 length，这导致了一个隐蔽的 bug：

const arr = reactive([1])  // length = 1

effect(() => {
  console.log(arr.length)  // 订阅了 length
})

arr[1] = 2  // 触发 SET，但这也隐式改变了 length！

如果不特殊处理 ，副作用函数只会因为 arr[1] 的 SET 被触发，却不知道 length 也变了。解决方案是在 trigger 中识别这种隐式副作用：

function trigger(target, key, type) {
  // 如果是数组的 ADD 操作（索引 >= length），必须触发 length 的更新
  if (type === 'ADD' && Array.isArray(target)) {
    triggerEffects(depsMap.get('length'))
  }
}

5.3 遍历的深渊：ownKeys 与 ITERATE_KEY

for...in 的诡异之处

for...in 循环不访问任何具体属性，它只关心**"有哪些属性"**。这给响应式系统带来了哲学难题：当执行 for (const k in obj) 时，副作用函数到底依赖了哪个 key？

答案是：它依赖的是对象的"键集合"本身 。Vue 创造了一个虚拟的键------ITERATE_KEY（Symbol）：

const ITERATE_KEY = Symbol('iterate')

// 拦截 for...in
ownKeys(target) {
  // 不追踪具体 key，而是追踪这个虚拟的"迭代器钥匙"
  track(target, ITERATE_KEY)
  return Reflect.ownKeys(target)
}

触发逻辑的分野：

• 修改已有属性（SET）：不影响键集合，不触发 ITERATE_KEY
• 添加新属性（ADD）：增加了键，触发 ITERATE_KEY
• 删除属性（DELETE）：减少了键，触发 ITERATE_KEY

// 在 trigger 中
if (type === 'ADD' || type === 'DELETE') {
  triggerEffects(depsMap.get(ITERATE_KEY))
}

5.4 原型链的幽灵：为什么子代修改会触发父代两次？

这是最隐蔽的 bug。当你有响应式原型链时：

const parent = reactive({ bar: 1 })
const child = reactive({})
Object.setPrototypeOf(child, parent)

effect(() => child.bar)  // 读取 child.bar，实际来自 parent
child.bar = 2  // 💥 副作用函数执行了两次！

幽灵现身：

1. 读取时：child.bar 不存在，沿着原型链读取 parent.bar，副作用函数与 parent 建立了联系。
2. 设置时：child.bar = 2 不存在于 child，于是调用原型的 [[Set]]，即 parent 的拦截器也被触发。
3. 结果：既触发了 child 的 setter（ADD 操作），又触发了 parent 的 setter（SET 操作），导致副作用函数执行两次。

驱魔符咒 ：在 set 拦截器中检查 receiver（即操作的发起者）是否是当前代理的目标：

set(target, key, value, receiver) {
  // 关键：只有 receiver 是 target 的代理时（而非原型链上的祖先），才触发更新
  if (target === receiver.raw) {
    trigger(target, key, type)
  }
}

5.5 深潜与浅航：响应式的递归悖论

深响应的陷阱：当你返回一个对象属性时，如果只是简单返回，用户拿到的是原始对象，无法继续追踪。

const obj = reactive({ 
  nested: { count: 0 } 
})

effect(() => {
  console.log(obj.nested.count)  // 如果 nested 不是响应式的，这里无法追踪
})

自动递归代理（Vue 3 的实现）：

get(target, key, receiver) {
  const res = Reflect.get(target, key, receiver)
  
  // 如果值是对象，自动包裹成响应式
  if (typeof res === 'object' && res !== null) {
    return isReadonly ? readonly(res) : reactive(res)
  }
  return res
}

浅响应（shallowReactive）的用途：对于大型列表或第三方类实例，深代理性能开销太大。浅响应只代理第一层，底层保持原样------这是性能与便利的权衡。

5.6 数组：最危险的异质对象

数组是对象的"叛徒"，因为它会隐式修改 length ，且拥有一堆会修改自身的"疯狂方法"（push, pop, splice 等）。

栈溢出的死亡循环

考虑这个"自杀式"代码：

const arr = reactive([])
effect(() => arr.push(1))  // 副作用 A
effect(() => arr.push(1))  // 副作用 B

死亡过程：

1. 副作用 A 执行 push(1)，读取 length（建立依赖），设置 length = 1（触发依赖）。
2. 副作用 B 因为 length 变化而执行，同样读取 length（建立依赖），设置 length = 2（触发依赖）。
3. 副作用 A 再次被触发... 栈溢出。

生存法则 ：push/pop 等方法虽然是"写操作"，但在执行时会先读 length 。我们需要在调用这些方法时暂停依赖追踪：

let shouldTrack = true

// 重写 push 等方法
arrayInstrumentations.push = function(...args) {
  shouldTrack = false  // 🚫 禁止追踪（屏蔽 length 的读取）
  const res = originalPush.apply(this, args)
  shouldTrack = true   // ✅ 恢复追踪
  return res
}

// 在 track 函数中检查
function track(target, key) {
  if (!shouldTrack) return  // 如果禁止追踪，直接返回
  // ... 收集依赖
}

includes 的"对象身份危机"

由于每次访问数组元素都会返回新的代理对象（如果元素是对象），这导致：

const obj = {}
const arr = reactive([obj])

arr.includes(arr[0])  // false！因为 arr[0] 是新的代理，不是原 obj

身份映射表 ：Vue 使用 reactiveMap 缓存原始对象到代理的映射，确保同一对象始终返回同一代理，解决 includes 和 indexOf 的识别问题。

5.7 Set/Map：封装的堡垒

Set 和 Map 是特殊的------它们的方法（get, set, add）在规范中要求内部槽 [[SetData]] 或 [[MapData]]。如果直接代理，调用 proxy.size 会报错，因为 this 指向代理而非原始对象。

渗透策略：

1. size 属性 ：通过 Reflect.get(target, 'size', target) 强制绑定 this 到原始对象。

2. 方法劫持 ：将 add, delete 等方法绑定到原始对象：

   get(target, key) {
     if (key === 'size') {
       return Reflect.get(target, key, target)
     }
     if (['add', 'delete', 'set', 'get'].includes(key)) {
       return target[key].bind(target)  // 绑定原始对象
     }
     // ...
   }

尾声：响应式的边界

至此，我们构建了一个能够感知读取、写入、遍历、删除、原型链、数组变异、集合操作 的全能响应式系统。但这并非终点------在下一章，我们将面对更凶险的挑战：Ref 的解包逻辑 与响应式系统的调试地狱。

---