剖析 Vue 3 源码中对 `Map`、`Set` 等集合类型数据的响应性处理，特别是 `collectionHandlers` 如何拦截 `add`、`delete`、`clear` 等操作。

各位观众老爷们，大家好！今天咱们来聊聊 Vue 3 源码里那些“藏龙卧虎”的集合类型响应式处理。啥？你说 Map 和 Set 这些玩意儿也能响应式？没错！Vue 3 就是这么神奇，连它们都给安排得明明白白的。

咱们今天要讲的重点是 collectionHandlers，这玩意儿就像是集合类型数据“背后的大佬”，专门负责拦截 add、delete、clear 这些操作，让 Vue 3 能够及时地知道数据发生了变化，从而更新视图。

开场白：响应式江湖，集合类型的新挑战

在 Vue 的世界里，数据驱动视图是核心思想。当数据发生变化时，视图能够自动更新。这个过程依赖于响应式系统。对于普通的对象，我们可以通过 Proxy 来拦截属性的读取和设置，从而实现响应式。

但是，Map 和 Set 这些集合类型的数据结构，它们的操作方式和对象不太一样。它们没有属性的概念，而是通过 add、delete、clear 等方法来增删改查数据。如果还用 Proxy 那一套，就有点“牛头不对马嘴”了。

所以，Vue 3 专门为 Map、Set 等集合类型设计了一套响应式方案，其中 collectionHandlers 就是这套方案的核心。

第一幕：collectionHandlers 闪亮登场

collectionHandlers 是一个对象，它定义了对 Map 和 Set 等集合类型进行响应式处理的各种方法。它的主要作用是拦截集合类型的方法调用，并在数据发生变化时触发响应式更新。

// packages/reactivity/src/reactive.ts

const mutableCollectionHandlers: ProxyHandler<CollectionTypes> = {
  get(target, key, receiver) {
    // ... 省略部分代码 ...
    return Reflect.get(
      hasOwn(target, key)
        ? target
        : targetMap.get(target) || target,
      key,
      receiver
    )
  }
}

const readonlyCollectionHandlers: ProxyHandler<CollectionTypes> = {
    get(target, key, receiver) {
        // ... 省略部分只读相关的代码 ...
        return Reflect.get(
          hasOwn(target, key)
            ? target
            : targetMap.get(target) || target,
          key,
          receiver
        )
      }
}

const shallowReadonlyCollectionHandlers: ProxyHandler<CollectionTypes> = {
    get(target, key, receiver) {
        // ... 省略部分浅只读相关的代码 ...
        return Reflect.get(
          hasOwn(target, key)
            ? target
            : targetMap.get(target) || target,
          key,
          receiver
        )
      }
}

const collectionHandlers: ProxyHandler<CollectionTypes> = {
  get(target, key, receiver) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      return true
    } else if (key === ReactiveFlags.IS_READONLY) {
      return false
    } else if (key === ReactiveFlags.IS_SHALLOW) {
      return false
    } else if (key === ReactiveFlags.RAW) {
      return target
    }
    return mutableCollectionHandlers.get!(target, key, receiver)
  }
}

const readonlyCollectionHandlersMap = new WeakMap<
  CollectionTypes,
  ProxyHandler<any>
>()

readonlyCollectionHandlersMap.set(mutableCollectionHandlers, readonlyCollectionHandlers)
readonlyCollectionHandlersMap.set(collectionHandlers, readonlyCollectionHandlers)

readonlyCollectionHandlersMap.set(mutableCollectionHandlers, readonlyCollectionHandlers)
readonlyCollectionHandlersMap.set(shallowCollectionHandlers, shallowReadonlyCollectionHandlers)
readonlyCollectionHandlersMap.set(shallowCollectionHandlers, shallowReadonlyCollectionHandlers)

简单来说，collectionHandlers 就是一个 ProxyHandler，它拦截了对 Map、Set 等集合类型的 get 操作。通过 targetMap 存放原始的对象，避免污染原始对象，也方便后续操作。

第二幕：拦截 add 操作，新增数据的秘密

当咱们往 Map 或 Set 里添加数据时，add 方法会被调用。collectionHandlers 会拦截这个调用，并在添加数据后触发响应式更新。

// packages/reactivity/src/reactive.ts

function createInstrumentationGetter(
  mutable: boolean = false,
  shallow: boolean = false
) {
  return function get(target: CollectionTypes, key: string | symbol, receiver: object) {
    // ... 省略部分代码 ...

    if (key === 'add') {
      return function add(this: any, value: any) {
        const targetIsReadonly = isReadonly(this)
        if (targetIsReadonly) {
          console.warn(
            `Set operation on key "${value}" failed: target is readonly.`,
            target
          )
          return this
        }

        const exist = target.has(value)
        const result = target.add(value)
        if (!exist) {
          trigger(
            target,
            TriggerOpTypes.ADD,
            value,
            value
          )
        }
        return result
      }
    }
  }
}

这段代码做了几件事：

检查只读状态: 首先检查目标集合是否是只读的。如果是只读的，则会发出警告，并直接返回，阻止修改。
判断是否已存在: 然后判断要添加的值是否已经存在于集合中。
执行 add 操作: 调用原始的 add 方法，将数据添加到集合中。
触发响应式更新: 如果数据是新增的（即之前不存在），那么就调用 trigger 函数，触发响应式更新。trigger 函数会通知所有依赖于这个 Map 或 Set 的响应式 effect，让它们重新执行，从而更新视图。

第三幕：拦截 delete 操作，删除数据的玄机

和 add 操作类似，collectionHandlers 也会拦截 delete 操作，并在删除数据后触发响应式更新。

// packages/reactivity/src/reactive.ts

function createInstrumentationGetter(
  mutable: boolean = false,
  shallow: boolean = false
) {
  return function get(target: CollectionTypes, key: string | symbol, receiver: object) {
    // ... 省略部分代码 ...

    if (key === 'delete') {
      return function deleteEntry(this: any, value: any) {
        const targetIsReadonly = isReadonly(this)
        if (targetIsReadonly) {
          console.warn(
            `Set operation on key "${value}" failed: target is readonly.`,
            target
          )
          return false
        }
        const exist = target.has(value)
        const result = target.delete(value)
        if (exist) {
          trigger(
            target,
            TriggerOpTypes.DELETE,
            value,
            value
          )
        }
        return result
      }
    }
  }
}

这段代码的逻辑和 add 操作类似：

检查只读状态: 首先检查目标集合是否是只读的。如果是只读的，则会发出警告，并直接返回，阻止修改。
判断是否存在: 然后判断要删除的值是否存在于集合中。
执行 delete 操作: 调用原始的 delete 方法，将数据从集合中删除。
触发响应式更新: 如果数据确实被删除了（即之前存在），那么就调用 trigger 函数，触发响应式更新。

第四幕：拦截 clear 操作，清空数据的奥秘

clear 操作用于清空 Map 或 Set 中的所有数据。collectionHandlers 同样会拦截这个操作，并在清空数据后触发响应式更新。

// packages/reactivity/src/reactive.ts

function createInstrumentationGetter(
  mutable: boolean = false,
  shallow: boolean = false
) {
  return function get(target: CollectionTypes, key: string | symbol, receiver: object) {
    // ... 省略部分代码 ...

    if (key === 'clear') {
      return function clear(this: any) {
        const targetIsReadonly = isReadonly(this)
        if (targetIsReadonly) {
          console.warn(`Set operation on key "clear" failed: target is readonly.`, target)
          return
        }
        const hadItems = target.size !== 0
        const result = target.clear()
        if (hadItems) {
          trigger(
            target,
            TriggerOpTypes.CLEAR,
            undefined,
            undefined
          )
        }
        return result
      }
    }
  }
}

这段代码的逻辑也和 add 和 delete 操作类似：

检查只读状态: 首先检查目标集合是否是只读的。如果是只读的，则会发出警告，并直接返回，阻止修改。
判断是否为空: 然后判断集合是否为空。
执行 clear 操作: 调用原始的 clear 方法，将集合清空。
触发响应式更新: 如果集合之前不为空，那么就调用 trigger 函数，触发响应式更新。

第五幕：has、get、size 等操作的响应式处理

除了 add、delete 和 clear 操作，collectionHandlers 还会对 has、get、size 等操作进行响应式处理。不过，这些操作主要是为了收集依赖，而不是触发更新。

// packages/reactivity/src/reactive.ts
function createInstrumentationGetter(
  mutable: boolean = false,
  shallow: boolean = false
) {
  return function get(target: CollectionTypes, key: string | symbol, receiver: object) {
    // ... 省略部分代码 ...

    if (key === 'has') {
      return function has(this: any, value: any) {
        const result = target.has(value)
        if (!isReadonly(this) && hasOwn(target, ReactiveFlags.RAW)) {
          track(target, TrackOpTypes.HAS, value)
        }
        return result
      }
    } else if (key === 'get') {
      return function get(this: any, key: any) {
        const result = target.get(key)
        if (!isReadonly(this) && hasOwn(target, ReactiveFlags.RAW)) {
          track(target, TrackOpTypes.GET, key)
        }
        return result
      }
    } else if (key === 'size') {
      return function size(this: any) {
        if (!isReadonly(this) && hasOwn(target, ReactiveFlags.RAW)) {
          track(target, TrackOpTypes.ITERATE, ITERATE_KEY)
        }
        return Reflect.get(target, key, this)
      }
    }
  }
}

这些操作的响应式处理主要是通过 track 函数来实现的。track 函数会将当前正在执行的响应式 effect 收集为依赖，当集合发生变化时，这些依赖会被通知，从而重新执行。

第六幕：总结与思考

collectionHandlers 是 Vue 3 响应式系统中一个非常重要的组成部分。它通过拦截 Map、Set 等集合类型的方法调用，实现了对这些数据结构的响应式处理。

优点:
- 能够对 Map、Set 等集合类型进行响应式处理，扩展了 Vue 3 的响应式能力。
- 通过 collectionHandlers 拦截操作，避免了直接修改原始数据，提高了代码的可维护性。
- 通过 track 函数收集依赖，实现了精确的依赖追踪，避免了不必要的更新。
思考:
- collectionHandlers 的实现相对复杂，需要对 Proxy、Reflect、track 和 trigger 等概念有深入的理解。
- 对于一些特殊的操作，例如 forEach，Vue 3 也做了特殊的处理。
- WeakMap 的使用,可以防止内存泄漏

表格总结

操作	拦截方法	触发更新时机	主要功能
`add`	`createInstrumentationGetter` 中的 `add`	添加的值不存在于集合中时	1. 检查只读状态。2. 判断是否已存在。3. 执行 `add` 操作。4. 触发响应式更新。
`delete`	`createInstrumentationGetter` 中的 `delete`	删除的值存在于集合中时	1. 检查只读状态。2. 判断是否存在。3. 执行 `delete` 操作。4. 触发响应式更新。
`clear`	`createInstrumentationGetter` 中的 `clear`	集合在清空前不为空时	1. 检查只读状态。2. 判断是否为空。3. 执行 `clear` 操作。4. 触发响应式更新。
`has`	`createInstrumentationGetter` 中的 `has`	N/A	1. 执行 `has` 操作。2. 如果不是只读的，则进行依赖追踪。
`get`	`createInstrumentationGetter` 中的 `get`	N/A	1. 执行 `get` 操作。2. 如果不是只读的，则进行依赖追踪。
`size`	`createInstrumentationGetter` 中的 `size`	N/A	1. 执行 `size` 操作。2. 如果不是只读的，则进行依赖追踪。

结束语：响应式世界的无限可能

Vue 3 的响应式系统是一个非常强大和灵活的系统。它不仅可以处理普通的对象，还可以处理 Map、Set 等集合类型的数据。collectionHandlers 就是这个系统中的一个重要组成部分，它让 Vue 3 能够更好地处理各种各样的数据结构，从而构建更加复杂和强大的应用程序。

希望今天的讲座能够帮助大家更好地理解 Vue 3 源码中对集合类型数据的响应式处理。下次有机会，咱们再聊聊 Vue 3 响应式系统的其他“黑科技”。感谢大家的观看！

发表回复 取消回复

发表回复取消回复