5.8.2 建立响应联系

Set / Map 的读写都要通过自定义方法完成：读 size 追 ITERATE_KEY，add / delete 里手动 trigger。

一、读 size：与 ITERATE_KEY 建立联系

get(target, key, receiver) {
  if (key === 'raw') return target

  // 读取 size 属性
  if (key === 'size') {
    track(target, ITERATE_KEY)                 // 新增：建立响应联系
    return Reflect.get(target, key, target)    // receiver 用原始对象，见 5.8.1
  }
  // ...
}

之所以追 ITERATE_KEY 而不是 'size'：任何新增、删除操作都会影响 size，而 ADD / DELETE 类型的 trigger 会连带触发 ITERATE_KEY 的依赖（见 5.3）。

二、自定义 add / delete

把集合方法定义在 mutableInstrumentations 中，并在 get 拦截中优先返回：

const mutableInstrumentations = {
  add(key) {
    // this 是代理对象，用 raw 拿到原始数据对象
    const target = this.raw
    const hadKey = target.has(key)          // 先判断值是否已存在
    const res = target.add(key)             // 通过原始对象调用，无需再 bind
    if (!hadKey) {
      trigger(target, key, 'ADD')           // 只有新增才触发响应
    }
    return res
  },
  delete(key) {
    const target = this.raw
    const hadKey = target.has(key)
    const res = target.delete(key)
    if (hadKey) {
      trigger(target, key, 'DELETE')        // 只有确实删除了才触发响应
    }
    return res
  }
}

// get 拦截函数内：
if (mutableInstrumentations.hasOwnProperty(key)) {
  return mutableInstrumentations[key]
}

要点：

通过 this.raw 拿到原始数据对象后再调用原生方法，不再需要 .bind；
add 与 delete 的触发条件恰好相反：add 只在元素不存在时触发，delete 只在元素确实存在时触发，避免无意义的更新。

const p = reactive(new Set([1, 2, 3]))

effect(() => {
  console.log(p.size) // 1→ 4 → 3
})
p.add(5)             // 触发
setTimeout(() => p.delete(5), 1000) // 触发

5.8.2 建立响应联系

一、读 size：与 ITERATE_KEY 建立联系

二、自定义 add / delete

相关