前端事件监听器与内存泄漏的深度解析

1. 事件监听器与内存泄漏的深度解析

事件监听器在前端开发中无处不在，但不当使用会导致严重的内存泄漏问题。让我们从一个真实案例开始：某电商网站在商品列表页频繁切换分类时，页面响应逐渐变慢，最终导致浏览器崩溃。经排查发现，每次分类切换都新增了滚动事件监听器却未移除，最终积累了上千个监听器。

1.1 内存泄漏的本质与危害

内存泄漏的本质是程序中已分配的内存既不能被使用，又不能被回收。在前端领域，事件监听器是常见泄漏源，因为：

1. 引用链保持：DOM元素与事件处理函数相互引用
2. 生命周期错配：组件销毁时未解除全局事件绑定
3. 闭包陷阱：事件回调捕获了外部变量导致无法释放

典型的内存泄漏演进过程：

javascript复制// 泄漏示例：每次组件挂载都新增监听器
let count = 0
function LeakyComponent() {
  useEffect(() => {
    window.addEventListener('resize', () => {
      console.log(count++) // 闭包捕获count导致函数无法释放
    })
  }, [])
  return <div>Leaky Component</div>
}

内存泄漏的三阶段影响：

1. 初期：无明显症状，内存缓慢增长
2. 中期：页面响应延迟，交互卡顿
3. 后期：浏览器标签页崩溃，移动端设备发热

1.2 事件系统的工作原理

浏览器事件系统的核心机制：

• 事件目标：实现EventTarget接口的DOM节点
• 监听器存储：每个节点维护一个监听器列表
• 冒泡捕获：事件传播阶段影响监听器执行顺序

当注册事件监听器时，实际上创建了这样的引用关系：

code复制DOM节点 → 事件监听器 → 处理函数 → 闭包变量
        ↖_________________________/

这种循环引用正是导致内存无法回收的关键。

2. 事件注册方式的全面对比与清理方案

2.1 三种事件注册机制详解

2.1.1 HTML内联事件

html复制<button onclick="handleClick()">Click</button>

特点：

• 直接写在HTML属性中
• 处理函数必须全局可用
• 移除方式：element.onclick = null 或删除整个元素

问题：

• 污染全局命名空间
• 难以维护多个处理函数
• 不符合现代前端框架的组件化思想

2.1.2 DOM属性赋值

javascript复制const button = document.getElementById('btn')
button.onclick = handleClick

特点：

• 一个事件只能绑定一个处理函数
• 移除方式：button.onclick = null
• 兼容性极好，支持所有浏览器

局限性：

javascript复制// 后续赋值会覆盖之前的处理函数
button.onclick = firstHandler
button.onclick = secondHandler // firstHandler被丢弃

2.1.3 addEventListener

javascript复制element.addEventListener('click', handleClick, {
  capture: false,
  once: true,
  passive: true
})

优势：

• 支持多个监听器
• 可配置捕获/冒泡阶段
• 提供丰富的选项参数
• 移除必须使用removeEventListener

关键细节：

javascript复制// 这两个监听器会被同时触发
element.addEventListener('click', handler1)
element.addEventListener('click', handler2)

// 精确移除需要完全匹配参数
element.removeEventListener('click', handler1, false) // 必须与add时一致

2.2 移除监听器的正确姿势

2.2.1 引用一致性原则

javascript复制// 错误示范：匿名函数无法移除
button.addEventListener('click', () => {
  console.log('Clicked!')
})
// 下面的移除操作无效
button.removeEventListener('click', () => {
  console.log('Clicked!')
})

// 正确做法：使用具名函数引用
const clickHandler = () => console.log('Clicked!')
button.addEventListener('click', clickHandler)
button.removeEventListener('click', clickHandler)

2.2.2 参数完全匹配

javascript复制// 添加监听器
element.addEventListener('click', handler, { capture: true })

// 这些移除方式都会失败：
element.removeEventListener('click', handler) // 缺少capture
element.removeEventListener('click', handler, false) // capture值不匹配
element.removeEventListener('click', handler, { capture: false }) // 选项对象不同

// 唯一正确的移除方式
element.removeEventListener('click', handler, { capture: true })

2.2.3 现代框架中的特殊处理

在React中，事件处理通常这样实现：

jsx复制function Component() {
  const handleClick = useCallback(() => {
    console.log('Clicked!')
  }, [])

  return <button onClick={handleClick}>Click</button>
}

React会自动处理DOM事件的绑定和移除，但需要注意：

• 避免在回调中创建新函数
• 使用useCallback稳定函数引用
• 自定义事件仍需手动清理

3. Vue组件中的事件管理实践

3.1 基础清理模式

Vue组合式API提供了清晰的生命周期钩子：

javascript复制import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const handleScroll = () => {
      console.log(window.scrollY)
    }

    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })
  }
}

3.1.1 常见错误模式

javascript复制// 错误1：匿名箭头函数
onMounted(() => {
  window.addEventListener('scroll', () => {
    console.log(window.scrollY)
  }) // 无法移除！
})

// 错误2：未处理元素不存在的情况
onMounted(() => {
  document.getElementById('missing').addEventListener('click', handler)
  // 可能抛出错误
})

// 错误3：异步注册未考虑卸载
onMounted(async () => {
  await loadData()
  window.addEventListener('resize', handler) 
  // 组件可能在await期间被卸载
})

3.2 高级组合式函数封装

3.2.1 通用事件监听Hook

javascript复制// useEventListener.js
import { onUnmounted } from 'vue'

export function useEventListener(target, event, handler, options) {
  // 处理响应式目标
  const stopWatch = watch(() => unref(target), (el) => {
    if (!el) return
    el.addEventListener(event, handler, options)
    onUnmounted(() => {
      el.removeEventListener(event, handler, options)
    })
  }, { immediate: true })

  onUnmounted(() => {
    stopWatch()
    const el = unref(target)
    if (el) el.removeEventListener(event, handler, options)
  })
}

3.2.2 支持多事件的工厂函数

javascript复制// useEventManager.js
export function useEventManager() {
  const listeners = new Map()

  function add(target, event, handler, options) {
    const el = unref(target)
    if (!el) return
    
    const key = `${event}_${handler.name}`
    el.addEventListener(event, handler, options)
    listeners.set(key, { el, event, handler, options })
  }

  function removeAll() {
    listeners.forEach(({ el, event, handler, options }) => {
      el.removeEventListener(event, handler, options)
    })
    listeners.clear()
  }

  onUnmounted(removeAll)

  return { add, removeAll }
}

3.2.3 自动清理的ResizeObserver

javascript复制// useAutoResize.js
export function useAutoResize(target, callback) {
  const observer = new ResizeObserver((entries) => {
    callback(entries[0].contentRect)
  })

  const stopWatch = watch(() => unref(target), (el) => {
    if (el) observer.observe(el)
  }, { immediate: true })

  onUnmounted(() => {
    stopWatch()
    observer.disconnect()
  })

  return {
    observer,
    disconnect: () => observer.disconnect()
  }
}

4. 内存泄漏诊断与性能优化

4.1 Chrome DevTools高级技巧

4.1.1 内存时间线分析

1. 打开Performance面板
2. 勾选Memory复选框
3. 执行可疑操作多次
4. 观察JS Heap内存曲线

健康模式：锯齿状图形（内存升降波动）
泄漏模式：阶梯式增长（内存只升不降）

4.1.2 堆快照对比法

1. 操作前拍摄堆快照（Snapshot 1）
2. 执行多次可疑操作
3. 操作后拍摄堆快照（Snapshot 2）
4. 选择Comparison视图对比

关键指标：

• #Delta：对象数量变化
• Size Delta：内存大小变化
• 重点关注：EventListener、Detached HTMLDivElement等

4.1.3 分配时间线追踪

1. 使用Allocation instrumentation on timeline
2. 执行操作并记录
3. 分析蓝色竖条（内存分配）
4. 点击查看保留路径（Retaining Path）

4.2 生产环境监控方案

4.2.1 性能指标API

javascript复制// 监控内存变化
setInterval(() => {
  const memory = performance.memory
  const data = {
    jsHeapSize: memory.usedJSHeapSize,
    jsHeapLimit: memory.jsHeapSizeLimit,
    listenerCount: getEventListenersCount()
  }
  sendToAnalytics(data)
}, 30000)

function getEventListenersCount() {
  // 简化版实现
  return Array.from(document.querySelectorAll('*')).reduce((count, el) => {
    return count + (el._events ? Object.keys(el._events).length : 0)
  }, 0)
}

4.2.2 自动化检测脚本

javascript复制class LeakDetector {
  constructor() {
    this.baseline = null
    this.threshold = 0.2 // 20%增长视为可能泄漏
  }

  start() {
    this.baseline = this.collectMetrics()
    setInterval(() => this.check(), 60000)
  }

  collectMetrics() {
    return {
      timestamp: Date.now(),
      memory: performance.memory.usedJSHeapSize,
      nodes: document.getElementsByTagName('*').length,
      listeners: this.countListeners()
    }
  }

  check() {
    const current = this.collectMetrics()
    const delta = (current.memory - this.baseline.memory) / this.baseline.memory
    
    if (delta > this.threshold) {
      console.warn(`Possible memory leak detected: 
        Memory increased by ${(delta * 100).toFixed(1)}%`)
      this.report(current)
    }
  }
}

5. 高级场景与边缘案例处理

5.1 第三方库的内存管理

5.1.1 常见库的清理方法

5.1.2 封装安全包装器

javascript复制function useSafeSwiper(containerRef, options) {
  const swiper = ref(null)

  onMounted(() => {
    swiper.value = new Swiper(unref(containerRef), options)
  })

  onUnmounted(() => {
    if (swiper.value) {
      swiper.value.destroy(true, true)
      swiper.value = null
    }
  })

  return swiper
}

5.2 动态内容的事件处理

5.2.1 事件委托模式

javascript复制// 传统方式：每个按钮都绑定监听器
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', handleClick)
})

// 事件委托：单个父元素监听
document.getElementById('container').addEventListener('click', (e) => {
  if (e.target.matches('.btn')) {
    handleClick(e)
  }
})

5.2.2 框架中的动态内容

在Vue中处理动态组件：

javascript复制const dynamicComponent = shallowRef(null)

onMounted(() => {
  // 动态加载组件
  import('./DynamicComp.vue').then(module => {
    dynamicComponent.value = module.default
  })
})

onUnmounted(() => {
  // 清理动态组件可能注册的全局事件
  window.removeEventListener('custom-event', handleCustomEvent)
})

5.3 Web Worker与跨线程通信

5.3.1 Worker事件清理

javascript复制const worker = new Worker('worker.js')

// 主线程监听
worker.addEventListener('message', handleMessage)

// 清理
onUnmounted(() => {
  worker.removeEventListener('message', handleMessage)
  worker.terminate() // 必须终止Worker
})

5.3.2 SharedWorker的特殊处理

javascript复制const sharedWorker = new SharedWorker('shared.js')

// 连接端口
sharedWorker.port.addEventListener('message', handleMessage)
sharedWorker.port.start()

// 清理
onUnmounted(() => {
  sharedWorker.port.removeEventListener('message', handleMessage)
  sharedWorker.port.close()
})

6. 工程化最佳实践

6.1 代码规范与静态检查

6.1.1 ESLint规则配置

javascript复制// .eslintrc.js
module.exports = {
  rules: {
    'require-listener-cleanup': ['error', {
      include: ['addEventListener', 'setTimeout', 'setInterval'],
      exclude: ['vue-template']
    }]
  }
}

6.1.2 TypeScript类型增强

typescript复制// types/cleanup.d.ts
declare global {
  interface Window {
    __registeredListeners?: Map<string, {
      target: EventTarget
      type: string
      listener: EventListener
      options?: AddEventListenerOptions
    }>
  }
}

export function trackEventListener(
  target: EventTarget,
  type: string,
  listener: EventListener,
  options?: AddEventListenerOptions
) {
  const id = `${type}_${Math.random().toString(36).slice(2)}`
  window.__registeredListeners = window.__registeredListeners || new Map()
  window.__registeredListeners.set(id, { target, type, listener, options })
  return id
}

6.2 测试策略

6.2.1 单元测试验证

javascript复制describe('Event cleanup', () => {
  let container

  beforeEach(() => {
    container = document.createElement('div')
    document.body.appendChild(container)
  })

  afterEach(() => {
    // 验证所有监听器已移除
    const listeners = getEventListeners(container)
    expect(listeners.length).toBe(0)
    container.remove()
  })

  it('should cleanup event listeners', () => {
    const mockFn = jest.fn()
    const comp = mount(Component, { attachTo: container })
    
    // 触发事件
    container.dispatchEvent(new Event('scroll'))
    expect(mockFn).toHaveBeenCalled()
    
    // 卸载组件
    comp.unmount()
    
    // 验证监听器移除
    const postListeners = getEventListeners(container)
    expect(postListeners.some(l => l.listener === mockFn)).toBe(false)
  })
})

6.2.2 E2E内存测试

javascript复制// playwright/test/memory.spec.js
test('should not leak memory when switching routes', async ({ page }) => {
  const getMemory = async () => {
    return page.evaluate(() => performance.memory.usedJSHeapSize)
  }

  const initial = await getMemory()
  
  // 执行重复操作
  for (let i = 0; i < 10; i++) {
    await page.click('#nav-link')
    await page.waitForTimeout(500)
  }

  const final = await getMemory()
  const growth = (final - initial) / initial
  
  expect(growth).toBeLessThan(0.1) // 内存增长不超过10%
})

6.3 性能优化技巧

6.3.1 节流与防抖的清理

javascript复制function useDebouncedListener(target, event, handler, delay) {
  const debounced = debounce(handler, delay)
  
  onMounted(() => {
    target.addEventListener(event, debounced)
  })

  onUnmounted(() => {
    target.removeEventListener(event, debounced)
    debounced.cancel() // 必须取消pending的执行
  })
}

6.3.2 被动事件优化

javascript复制// 提升滚动性能
window.addEventListener('scroll', handleScroll, {
  passive: true // 告诉浏览器不会调用preventDefault
})

// 但需要注意：
// 被动监听器内调用preventDefault会抛出错误

7. 架构级解决方案

7.1 事件总线设计

7.1.1 可清理的事件总线

typescript复制class SafeEventBus {
  private listeners = new Map<string, Set<Function>>()

  on(event: string, fn: Function): () => void {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, new Set())
    }
    this.listeners.get(event).add(fn)
    
    // 返回取消订阅函数
    return () => this.off(event, fn)
  }

  off(event: string, fn: Function): void {
    const eventListeners = this.listeners.get(event)
    if (eventListeners) {
      eventListeners.delete(fn)
      if (eventListeners.size === 0) {
        this.listeners.delete(event)
      }
    }
  }

  clear(): void {
    this.listeners.clear()
  }
}

7.1.2 Vue组合式API集成

javascript复制// useEventBus.js
export function useEventBus(bus) {
  const subscriptions = ref([])

  onUnmounted(() => {
    subscriptions.value.forEach(unsubscribe => unsubscribe())
    subscriptions.value = []
  })

  function subscribe(event, handler) {
    const unsubscribe = bus.on(event, handler)
    subscriptions.value.push(unsubscribe)
    return unsubscribe
  }

  return { subscribe }
}

7.2 依赖注入模式

7.2.1 提供清理上下文

javascript复制// cleanupContext.js
const CleanupSymbol = Symbol('cleanup')

export function provideCleanup() {
  const cleanups = new Set()
  
  const cleanup = () => {
    cleanups.forEach(fn => fn())
    cleanups.clear()
  }

  provide(CleanupSymbol, {
    register: (fn) => {
      cleanups.add(fn)
      return () => cleanups.delete(fn)
    },
    cleanup
  })

  return cleanup
}

export function useCleanup() {
  const ctx = inject(CleanupSymbol)
  if (!ctx) throw new Error('Missing cleanup provider')
  
  return {
    register: ctx.register,
    withCleanup: (fn) => {
      const unregister = ctx.register(fn)
      return () => {
        unregister()
        fn()
      }
    }
  }
}

7.2.2 组件中使用

javascript复制// ParentComponent.vue
import { provideCleanup } from './cleanupContext'

export default {
  setup() {
    const cleanup = provideCleanup()
    
    onUnmounted(() => {
      cleanup()
      console.log('All child cleanups executed')
    })
  }
}

// ChildComponent.vue
import { useCleanup } from './cleanupContext'

export default {
  setup() {
    const { register } = useCleanup()
    
    const timer = setInterval(() => {}, 1000)
    register(() => clearInterval(timer))
    
    const listener = window.addEventListener('resize', () => {})
    register(() => window.removeEventListener('resize', listener))
  }
}

8. 前沿技术与未来方向

8.1 WeakRef与FinalizationRegistry

8.1.1 弱引用事件模式

javascript复制class WeakEventListener {
  constructor(target, event, handler) {
    this.target = new WeakRef(target)
    this.event = event
    this.handler = handler
    this.registry = new FinalizationRegistry(heldValue => {
      this.cleanup()
    })
    
    target.addEventListener(event, handler)
    this.registry.register(target, 'event-listener', this)
  }

  cleanup() {
    const target = this.target.deref()
    if (target) {
      target.removeEventListener(this.event, this.handler)
    }
  }
}

// 使用
const listener = new WeakEventListener(element, 'click', handleClick)
// 当element被GC回收时，会自动移除监听器

8.1.2 注意事项

1. 不可预测性：GC时机不确定
2. 性能开销：FinalizationRegistry有额外成本
3. 兼容性：较新的API，需要polyfill

8.2 Observable API的潜力

8.2.1 基于Observable的事件

javascript复制function fromEvent(target, event, options) {
  return new Observable(observer => {
    const handler = (e) => observer.next(e)
    target.addEventListener(event, handler, options)
    
    return () => {
      target.removeEventListener(event, handler, options)
    }
  })
}

// 使用
const subscription = fromEvent(window, 'resize')
  .pipe(throttleTime(300))
  .subscribe(handleResize)

// 清理
subscription.unsubscribe()

8.2.2 与框架集成

javascript复制// useObservableEvent.js
export function useObservableEvent(target, event, observer, options) {
  let subscription
  
  onMounted(() => {
    subscription = fromEvent(unref(target), event, options)
      .subscribe(observer)
  })

  onUnmounted(() => {
    subscription?.unsubscribe()
  })

  return subscription
}

9. 疑难问题解决方案

9.1 复杂组件树的清理顺序

9.1.1 后序遍历清理算法

javascript复制function setupCleanupTree(rootComponent) {
  const cleanupStack = []
  
  const originalUnmount = rootComponent.unmount
  rootComponent.unmount = () => {
    // 后序遍历执行清理
    while (cleanupStack.length) {
      const fn = cleanupStack.pop()
      try {
        fn()
      } catch (e) {
        console.error('Cleanup error:', e)
      }
    }
    
    originalUnmount()
  }

  return {
    pushCleanup: (fn) => {
      cleanupStack.push(fn)
      return () => {
        const index = cleanupStack.indexOf(fn)
        if (index >= 0) cleanupStack.splice(index, 1)
      }
    }
  }
}

9.1.2 使用示例

javascript复制// App.vue
export default {
  setup() {
    const { pushCleanup } = setupCleanupTree(this)
    
    // 子组件的清理会先执行
    pushCleanup(() => {
      console.log('Root cleanup')
    })
  }
}

// ChildComponent.vue
export default {
  setup() {
    const { pushCleanup } = inject('cleanupTree')
    
    pushCleanup(() => {
      console.log('Child cleanup')
    })
  }
}

9.2 异步操作竞态处理

9.2.1 取消令牌模式

javascript复制class CancellationToken {
  constructor() {
    this.cancelled = false
    this.listeners = new Set()
  }

  onCancel(fn) {
    if (this.cancelled) {
      fn()
    } else {
      this.listeners.add(fn)
    }
  }

  cancel() {
    if (!this.cancelled) {
      this.cancelled = true
      this.listeners.forEach(fn => fn())
      this.listeners.clear()
    }
  }
}

function useAsyncWithCleanup(asyncFn) {
  const token = new CancellationToken()
  
  onUnmounted(() => {
    token.cancel()
  })

  const wrappedFn = (...args) => {
    if (token.cancelled) {
      return Promise.reject(new Error('Operation cancelled'))
    }
    
    return asyncFn(...args, token)
  }

  return wrappedFn
}

9.2.2 使用示例

javascript复制const fetchData = useAsyncWithCleanup((url, token) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    
    // 注册取消回调
    token.onCancel(() => {
      xhr.abort()
      reject(new Error('Request aborted by cleanup'))
    })

    xhr.open('GET', url)
    xhr.onload = () => resolve(xhr.responseText)
    xhr.onerror = reject
    xhr.send()
  })
})

// 组件卸载时会自动取消pending的请求
fetchData('/api/data').catch(console.error)

10. 工具链与生态系统

10.1 专用工具推荐

10.1.1 memlab

Facebook开源的JavaScript内存分析工具：

bash复制npm install -g memlab
memlab run --scenario scenario.js

特点：

• 自动化内存泄漏检测
• 可视化泄漏路径
• React组件树分析

10.1.2 chrome-memory-agent

javascript复制const { MemoryAgent } = require('chrome-memory-agent')

const agent = new MemoryAgent({
  samplingInterval: 1000,
  maxSamples: 60
})

agent.startMonitoring()
agent.on('leak', (report) => {
  console.log('Memory leak detected:', report)
})

10.2 性能监控SaaS集成

10.2.1 Sentry配置

javascript复制Sentry.init({
  dsn: 'YOUR_DSN',
  integrations: [
    new Sentry.Integrations.MemoryTracking({
      interval: 30, // 秒
      maxItems: 100
    })
  ]
})

10.2.2 Datadog RUM

javascript复制import { datadogRum } from '@datadog/browser-rum'

datadogRum.init({
  applicationId: 'xxx',
  clientToken: 'xxx',
  trackInteractions: true,
  trackResources: true,
  trackLongTasks: true,
  sessionSampleRate: 100,
  sessionReplaySampleRate: 20,
  defaultPrivacyLevel: 'mask-user-input'
})

// 手动记录内存
setInterval(() => {
  datadogRum.addAction('memory', {
    usedJSHeapSize: performance.memory?.usedJSHeapSize,
    totalJSHeapSize: performance.memory?.totalJSHeapSize
  })
}, 30000)

11. 移动端特殊考量

11.1 移动浏览器特性

11.1.1 页面冻结处理

javascript复制// 监听页面冻结/恢复
document.addEventListener('freeze', () => {
  // 暂停所有动画和轮询
})

document.addEventListener('resume', () => {
  // 恢复操作
})

// 在Vue中的处理
onActivated(() => {
  // 恢复页面状态
})

onDeactivated(() => {
  // 释放资源
})

11.1.2 低内存设备策略

javascript复制// 检测低内存设备
const isLowEndDevice = () => {
  const { deviceMemory, hardwareConcurrency } = navigator
  return deviceMemory < 2 || hardwareConcurrency < 4
}

// 动态调整策略
if (isLowEndDevice()) {
  // 减少同时活动的监听器数量
  // 使用更激进的事件委托
  // 提前清理不必要资源
}

11.2 混合应用注意事项

11.2.1 WebView通信清理

javascript复制// Android
const messageHandler = (event) => {
  console.log('Received:', event.data)
}

window.addEventListener('message', messageHandler)

// 清理时必须移除
onUnmounted(() => {
  window.removeEventListener('message', messageHandler)
})

11.2.2 Capacitor/Cordova插件

javascript复制const resumeCallback = () => {
  console.log('App resumed')
}

// 注册插件事件
document.addEventListener('resume', resumeCallback, false)

// 必须显式清理
onUnmounted(() => {
  document.removeEventListener('resume', resumeCallback, false)
})

12. 服务端渲染(SSR)场景

12.1 同构代码处理

12.1.1 环境判断

javascript复制// 安全的事件添加函数
function safeAddEventListener(target, event, handler) {
  if (typeof window !== 'undefined') {
    target.addEventListener(event, handler)
    return () => target.removeEventListener(event, handler)
  }
  return () => {}
}

12.1.2 内存泄漏预防

javascript复制// 服务端渲染时跳过效果
onMounted(() => {
  if (typeof window === 'undefined') return
  
  // 客户端特有逻辑
  window.addEventListener('resize', handleResize)
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
  })
})

12.2 全局状态管理

12.2.1 Pinia/Vuex清理

javascript复制// store-plugin.js
export function createCleanupPlugin() {
  return (context) => {
    const cleanups = new Set()
    
    context.store.$onAction(({ after, onError }) => {
      const hooks = []
      
      after((result) => {
        if (result && typeof result.cleanup === 'function') {
          cleanups.add(result.cleanup)
          hooks.push(() => cleanups.delete(result.cleanup))
        }
      })
      
      onError(() => {
        hooks.forEach(fn => fn())
      })
    })
    
    context.store.$cleanup = () => {
      cleanups.forEach(fn => fn())
      cleanups.clear()
    }
  }
}

12.2.2 使用示例

javascript复制// 在action中返回清理函数
actions: {
  fetchData() {
    const controller = new AbortController()
    
    fetch('/api', { signal: controller.signal })
      .then(res => res.json())
    
    return {
      data: /* ... */,
      cleanup: () => controller.abort()
    }
  }
}

// 组件卸载时清理所有store副作用
onUnmounted(() => {
  store.$cleanup()
})

13. 可视化与调试工具开发

13.1 自定义DevTools面板

13.1.1 Chrome扩展开发

javascript复制// background.js
chrome.devtools.panels.create(
  'Event Listeners',
  'icon.png',
  'panel.html',
  (panel) => {
    panel.onShown.addListener((window) => {
      // 注入检查脚本
      chrome.devtools.inspectedWindow.eval(
        `window.__LISTENER_DEBUGGING__ = true`,
        { useContentScriptContext: true }
      )
    })
  }
)

13.1.2 监听器统计

javascript复制// content-script.js
if (window.__LISTENER_DEBUGGING__) {
  setInterval(() => {
    const stats = {}
    
    // 遍历所有元素
    document.querySelectorAll('*').forEach(el => {
      const listeners = getEventListeners(el)
      Object.entries(listeners).forEach(([type, handlers]) => {
        stats[type] = (stats[type] || 0) + handlers.length
      })
    })
    
    // 发送到DevTools面板
    chrome.runtime.sendMessage({
      type: 'listener-stats',
      data: stats
    })
  }, 1000)
}

13.2 性能可视化

13.2.1 内存图表

javascript复制// 使用Chart.js展示内存趋势
const ctx = document.getElementById('memoryChart')
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
      label: 'JS Heap Size',
      data: [],
      borderColor: 'rgb(75, 192, 192)'
    }]
  }
})

// 更新数据
function updateChart() {
  const memory = performance.memory
  chart.data.labels.push(new Date().toLocaleTimeString())
  chart.data.datasets[0].data.push(memory.usedJSHeapSize)
  chart.update()
}

setInterval(updateChart, 5000)

13.2.2 事件流瀑布图

javascript复制// 记录事件时序
const eventLog = []

function recordEvent(event) {
  eventLog.push({
    type: event.type,
    target: event.target.tagName,
    timestamp: performance.now(),
    duration: 0
  })
  
  const startTime = performance.now()
  
  const originalStop = event.stopImmediatePropagation
  event.stopImmediatePropagation = function() {
    const duration = performance.now() - startTime
    eventLog[eventLog.length - 1].duration = duration
    originalStop.apply(this, arguments)
  }
}

// 监控所有事件
document.addEventListener('click', recordEvent, true)
document.addEventListener('scroll', recordEvent, true)
// 其他事件...

14. 团队协作规范

14.1 代码审查清单

14.1.1 事件处理检查项

1. [ ] 每个addEventListener都有对应的removeEventListener
2. [ ] 没有在循环或高频操作中注册事件
3. [ ] 第三方库实例有正确的销毁调用
4. [ ] 动态内容使用事件委托模式
5. [ ] 避免在watch/computed中注册事件
6. [ ] 所有清理操作都在onUnmounted/unmount生命周期中

14.1.2 内存敏感操作

1. [ ] 大数组/对象在不再需要时设为null
2. [ ] 定时器有对应的清理
3. [ ] WebSocket/EventSource连接正确关闭
4. [ ] 缓存策略有大小限制
5. [ ] 图片/视频元素在移除时释放资源

14.2 文档规范

14.2.1 组件元数据

markdown复制## 事件清理说明

### 全局事件
- [x] `window`上的`resize`事件
- [x] `document`上的`keydown`事件

### 第三方库
- [x] Swiper实例销毁
- [x] ECharts实例dispose

### 自定义事件
- [x] EventBus订阅清理
- [x] WebWorker消息监听移除

14.2.2 架构决策记录

markdown复制# ADR 003: 事件管理系统选择

## 状态
已批准

## 决策
采用基于WeakRef的自定义事件管理系统，原因：
1. 自动化清理降低人为失误
2. 与框架生命周期解耦
3. 性能开销在可接受范围

## 后果
- 需要polyfill支持旧浏览器
-