突然注意到 onMounted 在一个组件中可以多次调用，这不得发挥一下:
把绑定/解绑的逻辑封装到同一个模块中不就简化了吗，只需要在组件中注册一下子再传递一个回调就完事了。简单的组件中甚至不用引入onMounted和onUnmounted 

cnpm i mitt

/src/utils/emitter.js

import mitt from 'mitt'
import { onMounted, onUnmounted } from 'vue'
const names = {
  ONMOUNTED: 'onMounted',
  TRIGGER_FRESH: 'triggerFresh'
}
const __mitt = mitt()
function regist(name, cb) {
  onMounted(() => __mitt.on(name, cb))
  onUnmounted(() => __mitt.off(name, cb))
}
export default {
  mitt: __mitt,
  on: __mitt.on,
  off: __mitt.off,
  emit: __mitt.emit,
  regist,
  names
}

<script setup name="test">
import emitter from '@renderer/utils/emitter'
// 注册事件: 在onMounted时自动注册事件，在组件销毁时，自动取消注册
emitter.regist(emitter.names.ONMOUNTED, () => {
  console.log('test ONMOUNTED ')
})
</script>


<script setup name="test">
import { onMounted } from 'vue'
import emitter from '@renderer/utils/emitter'
//触发事件
onMounted(() => {
  emitter.emit(emitter.names.ONMOUNTED)
})
</script>