Responsive collection handling (Map/Set/WeakMap/WeakSet)

Responsive collection handling is a key concept in Vue.js, especially when we need to efficiently manage complex data structures. Map, Set, WeakMap, and WeakSet provide more flexible ways to handle collections, and when combined with Vue's reactivity system, they can significantly improve both development experience and performance.

Responsive Handling of Map

Vue 3's reactive and ref can directly wrap Map objects, making them reactive data. When the contents of a Map change, components that depend on this data will automatically update.

import { reactive } from 'vue'

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

// Add reactive data
state.userMap.set('user1', { name: 'Alice', age: 25 })
state.userMap.set('user2', { name: 'Bob', age: 30 })

// Use in templates
// <div v-for="[id, user] in state.userMap" :key="id">
//   {{ user.name }} - {{ user.age }}
// </div>

Note that directly modifying the size of a Map (e.g., adding/removing entries) will trigger reactive updates, but modifying the value of an existing entry requires using the set method:

// Correct approach - triggers updates
state.userMap.set('user1', { ...state.userMap.get('user1'), age: 26 })

// Incorrect approach - does not trigger updates
const user = state.userMap.get('user1')
user.age = 26

Reactive Features of Set

The reactive handling of Set is similar to Map. Vue can track changes in Set size and content modifications:

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

// Adding elements triggers updates
state.uniqueIds.add(123)
state.uniqueIds.add(456)

// Deleting elements also triggers updates
state.uniqueIds.delete(123)

// Check for element existence
if (state.uniqueIds.has(456)) {
  console.log('ID 456 exists')
}

In templates, you can directly iterate over a Set:

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

Special Characteristics of WeakMap and WeakSet

WeakMap and WeakSet differ from their strongly referenced counterparts, and Vue's reactivity system handles them differently:

1. WeakMap keys must be objects and are non-enumerable.
2. WeakSet can only contain objects and are non-enumerable.
3. They do not prevent garbage collection; entries are automatically removed when keys/values have no other references.

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

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

// When objKey is no longer referenced, the entry is automatically removed from WeakMap

Due to these characteristics, WeakMap and WeakSet are typically used to store object metadata or private data. Vue's reactivity system can track changes in these collections but cannot directly iterate over their contents.

Performance Optimization for Reactive Collections

When using collection types, here are some performance optimization tips:

1. For large datasets, Map is more efficient than object literals.
2. Set performs better than arrays when checking for element existence.
3. Avoid storing non-reactive objects in reactive collections.

// Performance optimization example
const largeDataSet = reactive(new Map())

// For batch updates, prepare data first and then update all at once
const newEntries = [
  ['id1', { value: 1 }],
  ['id2', { value: 2 }],
  // ...more data
]
newEntries.forEach(([key, val]) => {
  largeDataSet.set(key, val)
})

Collection Types and Vue's Composition API

In the Composition API, collection types work seamlessly with computed and watch:

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

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

// Compute the number of active users
const activeUserCount = computed(() => userStore.activeIds.size)

// Watch for changes to a specific user
watch(
  () => userStore.users.get('user1'),
  (newUser) => {
    console.log('user1 changed:', newUser)
  }
)

Utility Functions for Collection Operations

To simplify working with reactive collections, you can create utility functions:

// Merge two reactive Maps
function mergeMaps(target, ...sources) {
  for (const source of sources) {
    for (const [key, value] of source) {
      target.set(key, value)
    }
  }
  return target
}

// Filter a 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
}

// Use in Vue components
const filteredUsers = computed(() => 
  filterMap(userStore.users, user => user.age > 18)
)

Collection Types in Vuex/Pinia State Management

When using collection types in state management libraries, be mindful of serialization issues:

// Pinia example
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)
    }
  }
})

Edge Case Handling for Reactive Collections

When working with collection types, be aware of special cases:

1. NaN Handling: Map and Set consider NaN equal to NaN.
2. Object Key Comparison: When using objects as keys, references must be identical.
3. Reactive Nesting: Objects within collections must also be reactive.

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

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

// Object key example
const obj1 = { id: 1 }
const obj2 = { id: 1 }
specialCases.nanSet.add(obj1)
console.log(specialCases.nanSet.has(obj2)) // false

Browser Compatibility Considerations for Collection Types

While modern browsers support these collection types, for older browser support:

1. Consider using polyfills.
2. Alternatively, use equivalent object/array implementations.
3. In Vue 2, special methods are needed to make collections reactive.

// Making Set reactive in Vue 2
Vue.set(vm.someObject, 'someSet', new Set())

// Adding elements
const newSet = new Set(vm.someObject.someSet)
newSet.add(newValue)
vm.someObject.someSet = newSet

Type Safety with Collection Types and TypeScript

Combining TypeScript enhances type safety for collection operations:

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

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

// Type-safe operations
userStore.users.set('user1', {
  id: 'user1',
  name: 'Alice',
  age: 25
})

// Incorrect example will cause type errors
userStore.users.set('user2', {
  name: 'Bob' // Missing id and age
})

Testing Strategies for Reactive Collections

When testing reactive collections, verify their reactive behavior:

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)
})

Handling Collection Types in SSR Environments

For server-side rendering, consider the following with collection types:

1. Ensure collections are initialized identically on server and client.
2. Avoid using WeakMap/WeakSet for request-specific data on the server.
3. Convert to plain objects/arrays during serialization.

// Nuxt.js example
export const useSharedState = () => {
  const state = useState('shared', () => ({
    // Data structure serializable in SSR
    serverData: new Map()
  }))
  
  // Client-only WeakMap
  const clientOnlyData = process.client ? new WeakMap() : null
  
  return { state, clientOnlyData }
}

Collection Operations and Vue's Reactivity Principles

Understanding how Vue makes collections reactive helps in using them effectively:

1. Vue 3 uses Proxy to intercept collection operations.
2. Access to the size property is tracked.
3. Modification operations like add/set/delete trigger dependency updates.

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

// Proxy intercepts these operations
reactiveMap.set('key', 'value') // Triggers reactivity
reactiveMap.delete('key')       // Triggers reactivity
reactiveMap.clear()             // Triggers reactivity

Collection Types and Vue's Rendering Optimization

Proper use of collection types can optimize component rendering:

1. Use Set for quick checks on whether to render an item.
2. Map provides more efficient key-value lookups.
3. Avoid frequent collection type conversions in templates.

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

// Efficient conditional rendering
// <div v-for="[id, item] in allItems" :key="id">
//   <ItemComponent v-if="itemIds.has(id)" :item="item" />
// </div>

Memory Management Practices with Collection Types

Especially with WeakMap and WeakSet, pay attention to memory management:

1. Use WeakMap to store private object data.
2. WeakSet is suitable for marking objects without preventing garbage collection.
3. Avoid accidentally retaining references to keys.

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
  }
}

// When User instances are no longer referenced, related data is automatically cleared