响应式集合处理(Map/Set/WeakMap/WeakSet)

响应式集合处理在 Vue.js 中是一个关键概念，尤其是当我们需要高效地管理复杂数据结构时。Map、Set、WeakMap 和 WeakSet 提供了更灵活的集合操作方式，结合 Vue 的响应式系统，可以显著提升开发体验和性能。

Map 的响应式处理

Vue 3 的 reactive 和 ref 可以直接包装 Map 对象，使其成为响应式数据。当 Map 的内容发生变化时，依赖这些数据的组件会自动更新。

import { reactive } from 'vue'

const state = reactive({
  userMap: new Map()
})

// 添加响应式数据
state.userMap.set('user1', { name: 'Alice', age: 25 })
state.userMap.set('user2', { name: 'Bob', age: 30 })

// 在模板中使用
// <div v-for="[id, user] in state.userMap" :key="id">
//   {{ user.name }} - {{ user.age }}
// </div>

需要注意的是，直接修改 Map 的大小（如添加/删除条目）会触发响应式更新，但修改已存在条目的值需要使用 set 方法：

// 正确的方式 - 会触发更新
state.userMap.set('user1', { ...state.userMap.get('user1'), age: 26 })

// 错误的方式 - 不会触发更新
const user = state.userMap.get('user1')
user.age = 26

Set 的响应式特性

Set 的响应式处理与 Map 类似，Vue 能够跟踪 Set 的大小变化和内容修改：

const state = reactive({
  uniqueIds: new Set()
})

// 添加元素会触发更新
state.uniqueIds.add(123)
state.uniqueIds.add(456)

// 删除元素也会触发更新
state.uniqueIds.delete(123)

// 检查元素存在
if (state.uniqueIds.has(456)) {
  console.log('ID 456 exists')
}

在模板中可以直接使用 Set 的迭代：

// <div v-for="id in state.uniqueIds" :key="id">
//   {{ id }}
// </div>

WeakMap 和 WeakSet 的特殊性

WeakMap 和 WeakSet 与它们的强引用版本不同，Vue 的响应式系统对它们的处理也有所区别：

1. WeakMap 的键必须是对象，且不可枚举
2. WeakSet 只能包含对象，且不可枚举
3. 它们不阻止垃圾回收，当键/值没有其他引用时会被自动清除

const state = reactive({
  weakData: new WeakMap()
})

const objKey = {}
state.weakData.set(objKey, 'some private data')

// 当 objKey 不再被引用时，条目会自动从 WeakMap 中移除

由于这些特性，WeakMap 和 WeakSet 通常用于存储对象的元数据或私有数据，Vue 的响应式系统能够跟踪这些集合的变化，但无法直接迭代它们的内容。

响应式集合的性能优化

使用集合类型时，有几个性能优化的技巧：

1. 对于大型数据集，使用 Map 比对象字面量更高效
2. Set 在检查元素存在性时比数组性能更好
3. 避免在响应式集合中存储非响应式对象

// 性能优化示例
const largeDataSet = reactive(new Map())

// 批量更新时，先准备数据再一次性更新
const newEntries = [
  ['id1', { value: 1 }],
  ['id2', { value: 2 }],
  // ...更多数据
]
newEntries.forEach(([key, val]) => {
  largeDataSet.set(key, val)
})

集合类型与 Vue 的组合式 API

在组合式 API 中，集合类型可以与 computed 和 watch 完美配合：

import { reactive, computed, watch } from 'vue'

const userStore = reactive({
  users: new Map(),
  activeIds: new Set()
})

// 计算活跃用户数量
const activeUserCount = computed(() => userStore.activeIds.size)

// 监听特定用户的变化
watch(
  () => userStore.users.get('user1'),
  (newUser) => {
    console.log('user1 changed:', newUser)
  }
)

集合操作的实用工具函数

为方便处理响应式集合，可以创建一些工具函数：

// 合并两个响应式 Map
function mergeMaps(target, ...sources) {
  for (const source of sources) {
    for (const [key, value] of source) {
      target.set(key, value)
    }
  }
  return target
}

// 过滤 Map
function filterMap(map, predicate) {
  const result = new Map()
  for (const [key, value] of map) {
    if (predicate(value, key)) {
      result.set(key, value)
    }
  }
  return result
}

// 在 Vue 组件中使用
const filteredUsers = computed(() => 
  filterMap(userStore.users, user => user.age > 18)
)

集合类型与 Vuex/Pinia 的状态管理

在状态管理库中使用集合类型时，需要注意序列化问题：

// Pinia 示例
import { defineStore } from 'pinia'

export const useUserStore = defineStore('users', {
  state: () => ({
    userMap: new Map()
  }),
  actions: {
    addUser(id, user) {
      this.userMap.set(id, user)
    }
  },
  getters: {
    userCount: (state) => state.userMap.size,
    activeUsers: (state) => {
      return Array.from(state.userMap.values()).filter(user => user.isActive)
    }
  }
})

响应式集合的边界情况处理

处理集合类型时需要注意一些特殊情况：

1. NaN 的处理：Map 和 Set 认为 NaN 等于 NaN
2. 对象键的比较：使用对象作为键时，引用必须相同
3. 响应式嵌套：集合中的对象也需要是响应式的

const specialCases = reactive({
  nanSet: new Set()
})

// NaN 处理
specialCases.nanSet.add(NaN)
console.log(specialCases.nanSet.has(NaN)) // true

// 对象键示例
const obj1 = { id: 1 }
const obj2 = { id: 1 }
specialCases.nanSet.add(obj1)
console.log(specialCases.nanSet.has(obj2)) // false

集合类型的浏览器兼容性考虑

虽然现代浏览器都支持这些集合类型，但在需要支持旧浏览器时：

1. 考虑使用 polyfill
2. 或者使用等价的普通对象/数组实现
3. 在 Vue 2 中需要使用特殊方法使集合响应式

// Vue 2 中使 Set 响应式
Vue.set(vm.someObject, 'someSet', new Set())

// 添加元素
const newSet = new Set(vm.someObject.someSet)
newSet.add(newValue)
vm.someObject.someSet = newSet

集合类型与 TypeScript 的类型安全

结合 TypeScript 可以增强集合操作的类型安全：

interface User {
  id: string
  name: string
  age: number
}

const userStore = reactive<{
  users: Map<string, User>
  activeIds: Set<string>
}>({
  users: new Map(),
  activeIds: new Set()
})

// 类型安全的操作
userStore.users.set('user1', {
  id: 'user1',
  name: 'Alice',
  age: 25
})

// 错误的示例会引发类型错误
userStore.users.set('user2', {
  name: 'Bob' // 缺少 id 和 age
})

响应式集合的测试策略

测试响应式集合时，需要验证响应式行为：

import { reactive } from 'vue'

test('Map reactivity', async () => {
  const state = reactive({
    data: new Map()
  })
  
  let computedValue = 0
  effect(() => {
    computedValue = state.data.size
  })
  
  state.data.set('key', 'value')
  await nextTick()
  
  expect(computedValue).toBe(1)
  
  state.data.delete('key')
  await nextTick()
  
  expect(computedValue).toBe(0)
})

集合类型在 SSR 环境下的处理

在服务器端渲染时，集合类型需要注意：

1. 确保在服务器和客户端初始化相同的集合
2. 避免在服务器上使用 WeakMap/WeakSet 存储请求特定的数据
3. 序列化时转换为普通对象/数组

// Nuxt.js 示例
export const useSharedState = () => {
  const state = useState('shared', () => ({
    // 在 SSR 中可序列化的数据结构
    serverData: new Map()
  }))
  
  // 客户端特定的 WeakMap
  const clientOnlyData = process.client ? new WeakMap() : null
  
  return { state, clientOnlyData }
}

集合操作与 Vue 的响应式原理

理解 Vue 如何使集合响应式有助于更好地使用它们：

1. Vue 3 使用 Proxy 拦截集合的操作方法
2. 对 size 属性的访问会被跟踪
3. 修改操作如 add/set/delete 会触发依赖更新

const rawMap = new Map()
const reactiveMap = reactive(rawMap)

// Proxy 可以拦截这些操作
reactiveMap.set('key', 'value') // 触发响应
reactiveMap.delete('key')       // 触发响应
reactiveMap.clear()             // 触发响应

集合类型与 Vue 的渲染优化

合理使用集合类型可以优化组件渲染：

1. 使用 Set 快速检查是否应该渲染某个项目
2. Map 可以提供更高效的键值查找
3. 避免在模板中频繁转换集合类型

const itemIds = reactive(new Set())
const allItems = reactive(new Map())

// 高效的条件渲染
// <div v-for="[id, item] in allItems" :key="id">
//   <ItemComponent v-if="itemIds.has(id)" :item="item" />
// </div>

集合类型的内存管理实践

特别是使用 WeakMap 和 WeakSet 时，需要注意内存管理：

1. 使用 WeakMap 存储对象的私有数据
2. WeakSet 适合标记对象而不阻止垃圾回收
3. 避免意外保留对键的引用

const privateData = new WeakMap()

class User {
  constructor(name) {
    privateData.set(this, {
      name,
      secretToken: Math.random().toString(36).substring(2)
    })
  }
  
  getName() {
    return privateData.get(this).name
  }
}

// 当 User 实例不再被引用时，相关数据会自动清除