vue-socket.io 通信实时更新数据时,vue频繁触发渲染函数导致的cpu占用过高问题。
发布于 5 年前 作者 hxx258456 6231 次浏览 来自 问答

场景: 物联网通信,后端采集硬件设备,然后通过socket.io传输到前端,因为vue的双向数据绑定不会检测到对象的索引复制,第一次尝试使用vue.set函数修改对象,触发渲染函数,但是,由于数据点比较多,socket.io事件频繁触发导致页面卡死,第二次想着替换set方法,使用了splice替换数组中的元素,但一样频繁触发了vue的渲染函数,导致页面非常卡顿,在这里请教大家,有什么解决方案吗

4 回复

好的建议也可以,麻烦大家了。 这个问题,可能更应该通过后端解决,但是因为自己前端经验不足,想借着这个问题锻炼一下自己,所以想问问大家,看大家有没有什么思路

你都知道原因了还问啥,限制set次数就好了,函数节流了解一下

上函数节流,然后 v-for 的元素加 key,key 不要用 index,用 id

写一个定时器,定时 set 页面。socket 不直接 set 值

回到顶部