优化思路：
把webSocket接收到的数据用一个数组存起来，达到一定长度再统一渲染，可根据推送数据的速度适当调解数组长度限制，如果一段时间内改数组长度打不要渲染条件，就用定时器之间渲染
data() { return { tempDataWsList: [], // 存放临时ws数据数组 list: [], // 页面上的列表 listCopy: [], // 深拷贝的初始化列表数据，用于统一渲染 }}methods: { ... // websocket接收数据的方法 onMessage(data) { if (data.data) { // 将Json字符串转译 const dataWs = JSON.parse(data.data); // 将转译后的数据推入临时ws数据数组中 this.tempDataWsList.push(dataWs); // 有ws数据就关闭定时器 clearTimeout(this.wsTimeout); // 做缓存渲染,将ws接收到的数据放到数组，满10个就统一渲染 if (this.tempDataWsList.length == 10) { this.handleList(); } else { // 如果最后一个接收后1秒钟内不能满足10个，则直接渲染 this.wsTimeout = setTimeout(() => { this.handleList(); }, 1000); } } }, // 操作数据渲染 handleList() { // 循环临时ws数据数组 this.tempDataWsList.forEach(temp => { // 循环深拷贝的初始化列表数据 this.listCopy.forEach(item => { // 循环判断列表对应ws数据id，修改深拷贝列表上的值 item.pointDetails.forEach(item1 => { if (item1.id == temp.detailsId) { item1.value = temp.realVal; } }); }); }); // 清空临时ws数据数组 this.tempDataWsList = []; // 将修改的列表数据赋值给页面渲染 this.list = this.listCopy; }}