Vue 中元素拖动优化?

[thinkershare]

这个问题我之前提过 原问题 , 本来最初以为解决了, 现在上了生产环境, 发现还是有性能问题, 看看大家有没有什么优化意见, 代码大概如下所示, box 内有 1000 个左右的设备组件, 需要鼠标点击时拖动 box, box 目标使用了相对定位, 然后使用 3d 变形来实现移动元素, device 组件都绝对定位, 他们都有自己的 x,y 坐标位置, 发现即便使用 3D, device 太多的时候, 整个拖动会导致 CPU 100%, 然后就会明显的不跟手, 我研究了几天, 发现各种优化方案都不行, 最后决定在拖动时候隐藏所有 device 组件, v-show 的隐藏仍然会卡, v-if 的隐藏不会卡顿, 但是 v-if 在隐藏后重新显示却需要消耗 2s, 这样体验就会特别差, 想问问大家的建议

<div class="box">
	<device v-for="device in devices" :data="device" :key="device.id" />
</div>

[KouShuiYu]

你需要添加一个复现的 DEMO
https://codepen.io/

[thinkershare]

@KouShuiYu 嗯, 我晚上回去试一试, 可能有点麻烦, 要 100%重现, 因为 device 这个组件非常复杂, 否则我就直接迁移到 canvas 上去了

[walpurgis]

能上虚拟列表么

[thinkershare]

@walpurgis 不能的哦, 因为这是地图, 大小是 8000*8000 像素左右, 需要监控所有设备

[walpurgis]

地图啊，可以考虑使用点聚合方案
参考百度地图实现 https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/conflux

[learnshare]

8000px^2 ，以及 1000 个独立设备，估计 DOM 渲染性能跟不上
Canvas 渲染肯定很有效，但做起来更复杂

[thinkershare]

[代码地址]( http://dlsmartlink.com/test.zip), 需要使用 npm install 安装下依赖, 然后 npm run dev 就可以了

[thinkershare]

@learnshare 我研究了几天, 发现和事件有关系, 不绑定事件 2000 个 device 拖动我明显丢帧, 看来只能抛弃组件, 使用观察者模式优化事件监听