univer-bot[bot]
commented
1 month ago Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑🤝🧑👫🧑🏿🤝🧑🏻👩🏾🤝👨🏿👬🏿
Origin Title: [Bug] 使用vue3组件时，会重复创建很多空div
Title: [Bug] When using vue3 components, many empty divs will be repeatedly created
Before you submitted this question, did you check the following?
- [X] Is this really a problem?
- [X] I've searched Github Issues but haven't found any similar issues.
Affected packages and versions
0.2.2
Recurrence link
Register a vue3 component in ComponentManager, such as:
this.disposeWithMe(this._componentManager.register(CHART_COMPONENT_KEY, Vue3Chart, {framework: 'vue3'}))
Use the addFloatDomToPosition method provided by the SheetCanvasFloatDomManagerService class to add a floating chart, as shown in the figure:
During the dragging process of this floating chart, many empty divs will be generated, as shown below:
The reason is guessed that in FloatDom.tsx, the position changes. Since the Component is not wrapped with useMemo, it also causes the refresh to be re-obtained from componentManager.get(layer.componentKey), and the vue3 component in the componentManager.get method will go to Adding divs to document.body will eventually cause the vue3 component of the floating chart to continuously add empty divs to the body.
Expected behavior
When using the vue3 control on the floating layer, you should only render the component once, instead of rendering the vue3 component repeatedly when moving the floating layer.
Actual behavior
The vue3 component in the floating layer will continuously re-render the vue3 component during the movement of the floating layer, sometimes resulting in blank spaces during the movement.
Running environment
Chrome
system message
System: OS: Windows 11 10.0.22000 CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400 @ 2.60GHz Memory: 11.03 GB / 31.77 GB Binaries: Node: 20.14.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 9.6.2 - C:\Program Files\nodejs\npm.CMD pnpm: 9.1.4 - ~\AppData\Roaming\npm\pnpm.CMD Browsers: Edge: Spartan (44.22000.120.0), Chromium (114.0.1823.43) Internet Explorer: 11.0.22000.120
jikkai
在您提交此问题之前，您是否检查了以下内容？
受影响的包和版本
0.2.2
复现链接
在ComponentManager中注册一个vue3组件，如：
在这个悬浮图表拖拽过程中，会产生很多空div，如下图：
产生的原因猜测是在FloatDom.tsx中，position发生变化，由于Component没有用useMemo包裹，也导致刷新从而变成从componentManager.get(layer.componentKey)重新获取，而componentManager.get方法中vue3组件会往document.body中添加div，最终导致悬浮图表的vue3组件会不停的往body添加空div。
this.disposeWithMe(this._componentManager.register(CHART_COMPONENT_KEY, Vue3Chart, {framework: 'vue3'}))使用SheetCanvasFloatDomManagerService类提供的addFloatDomToPosition方法添加一个悬浮图表，如图：预期行为
悬浮层在使用vue3控件时，应当只要渲染一次组件，而不是在移动悬浮层时重复渲染vue3组件
实际行为
在悬浮层中的vue3组件，在移动悬浮层过程中会不断的重新渲染vue3组件，有时会导致移动过程中出现空白
运行环境
Chrome
系统信息
System: OS: Windows 11 10.0.22000 CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400 @ 2.60GHz Memory: 11.03 GB / 31.77 GB Binaries: Node: 20.14.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 9.6.2 - C:\Program Files\nodejs\npm.CMD pnpm: 9.1.4 - ~\AppData\Roaming\npm\pnpm.CMD Browsers: Edge: Spartan (44.22000.120.0), Chromium (114.0.1823.43) Internet Explorer: 11.0.22000.120