网站开发策划个人简历精通网站建设 百度云

突然注意到 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>