Ant Design Vue table组件 websocket通讯，高速、大批量数据处理，视图卡顿问题

问题

Vue 常用的UI框架，table组件在websocket通讯时，大量数据过来时页面数据加载不过来的情况，三个UI框架对比结果 ant-design-vue 和 iview比较差 element-ui 相对好点，但也卡顿。

下图是博主开发的读卡器SDK测试工具，在做测速时就遇到的这问题，找来找去，最终发现是UI框架的问题！

效果对比

测试机器：NRP-D915I4 超高频分体式读写器

单天线模式，2500~3600ms读500张卡，测试环境非严苛，严苛环境下读卡性能更强悍。

卡顿

需要鼠标移动视图才会刷新！体验感极差

流畅

效果很明显

页面实际过来的数据远远大于500，这里对数据进行了去重。

解决问题

之前也找了各种方案，如this.$forceUpdate()、this.$nextTick()、 this.$set()等，均与失败告终。后面发现只要数据不加载到table里，它就不会卡。于是就自己写了个table组件！ 🤣

效果还不错，其实也简单，样式就拷贝UI框架本身的，把数据部分替换掉就行了。

代码

博客迁移，点击查看原文。