ikuaitu / vue-fabric-editor

快图设计-基于fabric.js和Vue的开源图片编辑器,可自定义字体、素材、设计模板。fabric.js and Vue based image editor, can customize fonts, materials, design templates.
https://ikuaitu.github.io/doc/#/
MIT License
5.45k stars 993 forks source link

refactor: 重构选择事件监听hook #365

Closed wuchenguang1998 closed 6 months ago

wuchenguang1998 commented 6 months ago

修复issue#364 出现问题的原因是: emitter监听了太多事件,超过了默认最大监听数。排查发现,多个组件都调用了src\hooks\select.ts的自定义hook,这个hook在onMounted时监听了3个画布元素的选择事件。导致多个组件调用这hook时,这3个事件被反复监听。通过console.log(canvasEditor.listenerCount(SelectEvent.ONE));查看,发现selectOne监听了近30次,其中多数是来源于这个自定义hook。 本次提交的改动: 将src\hooks\select.ts主要监听逻辑抽取成新的hook(useSelectListen),在src\views\home\index.vue调用一次,并将mixinState暴露。原来的src\hooks\select.ts通过inject获取mixinState,提供给有需要的组件。 最终效果: 选择事件的监听大幅减少,控制台警告消除。

Qiu-Jun commented 6 months ago

这个hooks是vue2版本时的mixin, 之前我试过把他放到home处理,但是好像忘记出了啥问题来着。我节后看看,没问题再合并

nihaojob commented 6 months ago

@wuchenguang1998 @Qiu-Jun 感谢两位,代码已经合并到主分支。