Vue3 Composable多实例重复绑定事件的性能问题与单例实现问询

官方给出的基础示例本质是教学用的最小可运行Demo，并非生产环境的最优实现，这么写的核心原因有三点：

• 入门章节的核心目标是讲清Composable的基础范式：封装响应式状态、关联组件生命周期、对外暴露可复用接口。如果一开始就加入单例、引用计数等优化逻辑，会额外增加入门理解成本，偏离基础教学的目标。
• 常规业务场景下，单个页面内调用useMouse的组件基本都是个位数，重复绑定事件的性能开销微乎其微，完全感知不到，基础实现足够覆盖绝大多数普通使用场景。
• 性能优化属于进阶范畴，官方默认开发者掌握基础写法后，可以根据自身业务的实际负载按需做优化，不会在入门示例里提前覆盖所有边界优化点。

对于鼠标位置、窗口尺寸、网络连接状态这类全局唯一、所有调用方共享同一份状态的场景，单例模式确实是更合理的实现，能彻底避免重复绑定事件的冗余开销。

注意：单例模式不是Composable的通用写法。如果Composable需要为每个调用组件维护独立状态（比如单表单的校验逻辑、单个元素的拖拽逻辑），强行用单例会导致所有组件共享同一份状态，引发逻辑错乱。

实现单例Composable可以直接利用ES模块的天然特性：ES模块在应用生命周期内只会初始化一次，模块顶层定义的变量会被所有导入方共享，本身就是天然的单例。只需要搭配引用计数管理事件的绑定和解绑，避免出现“单个组件卸载就移除全局事件，导致其他正在使用的组件拿不到更新”的问题即可。
优化后的单例版useMouse实现如下：

import { ref, onMounted, onUnmounted } from 'vue'

// 模块顶层定义共享响应式状态，所有调用方共享同一份引用
const x = ref(0)
const y = ref(0)
// 记录当前正在使用该Composable的组件数量
let activeInstanceCount = 0
// 标记全局事件是否已经绑定
let isEventBound = false

function updateMousePosition(event) {
  x.value = event.pageX
  y.value = event.pageY
}

function bindMouseMoveEvent() {
  if (isEventBound) return
  window.addEventListener('mousemove', updateMousePosition)
  isEventBound = true
}

function unbindMouseMoveEvent() {
  if (activeInstanceCount !== 0 || !isEventBound) return
  window.removeEventListener('mousemove', updateMousePosition)
  isEventBound = false
}

export function useMouse() {
  activeInstanceCount++

  onMounted(() => {
    bindMouseMoveEvent()
  })

  onUnmounted(() => {
    activeInstanceCount--
    // 只有当所有使用该Composable的组件都卸载后，才真正解绑事件
    unbindMouseMoveEvent()
  })

  return { x, y }
}

这个实现的实际表现：

• 无论多少个组件同时调用useMouse，全局只会绑定1个mousemove事件监听器
• 只要还有1个组件在使用，事件就不会被解绑，状态会持续更新
• 当所有使用该Composable的组件都卸载后，会自动移除事件监听器，不存在内存泄漏
• 所有组件共享同一份响应式状态，不会重复执行位置更新逻辑，性能开销降到最低

内容的提问来源于stack exchange，提问作者The Sloth