代码审核报告问题1 设计逻辑：原有的四块播放屏数组lastVideoList和当前数组videoList对比，如相同不再

问题1

设计逻辑：原有的四块播放屏数组lastVideoList和当前数组videoList对比，如相同不再重新渲染。

审核前代码：

for (let i = 0; i < 4; i++) {
  console.log('dayin' + i);
  if (!videoObjList[i] && !this.lastVideoList[i]) {
    // 原来的没有值现在的也没有值 那这块屏幕不变 跳过处理下一块屏幕变没变
    continue;
  } else if (!videoObjList[i]) {
    // 原来的有值但是现在的没有值 那这块屏幕要清空 清空完了处理下一块屏幕变没变
    this.$set(this.videoList, i, '');
    continue;
  } else if (!this.lastVideoList[i]) {
    // 原来的没有值但是现在的有值 那这块屏幕要给出值 给完了处理下一块屏幕变没变
    this.$set(this.videoList, i, videoObjList[i]);
    continue;
  }
  console.log(JSON.parse(videoObjList[i]));
  // 原来和现在都有值的情况 要比较indexCode一样吗  一样就不替换了 不一样就要替换
  if (
    JSON.parse(videoObjList[i]).deviceIndexCode ===
      JSON.parse(this.lastVideoList[i]).deviceIndexCode &&
    JSON.parse(videoObjList[i]).playMode ===
      JSON.parse(this.lastVideoList[i]).playMode
  ) {
    continue;
  } else {
    this.$set(this.videoList, i, videoObjList[i]);
  }
}

代码问题：逻辑复杂化，字符串转对象后边界问题反而未考虑全面，仅考虑了设备编号deviceIndexCode和播放类型playMode，实际还应考虑url等是否改变，见下方截图 videoList[i]的内容：

转数组后

审核后优化代码

for (let i = 0; i < 4; i++) {
  if (videoObjList[i]!==this.lastVideoList[i]) {
    this.$set(this.videoList, i, videoObjList[i]);
  } 
}

总结：简单的问题不要复杂化，如果你写出了别人看不懂还需要大量注释的时候，请多想一想，这个逻辑真的有这么复杂吗，简单逻辑复杂化的时候反而容易出bug。

问题2

一个很小的组件pointList.vue页面出现多次处理相同的数据

优化处理方案：此处的indexCode/cameraIndexCode/address/id都代表监控点编号，在获取到接口数据时立即处理，比如统一取名cameraIndexCode,在获取到对象时新增key，cameraIndexCode赋值id/address/indexCode。

针对郑怡华同学提到的问题：如需求要求当有某个值的时候展示这个值当没有的时候展示另一个值（两个值不代表相同的含义），举个例子：有身份证时展示身份证，没有则展示姓名。那么在获取到数据时直接处理数据，如给数据对象新增一个Key命名为showValue:idcard?idCard:name,并判断赋值，一次处理多次使用，便于维护。

总结：通常后端接口数据需要统一处理，但是后端不处理的时候，请一定在接口获取到数据后马上处理（这样仅需处理一次），而不是在使用的时候多次处理，非常不利于维护，遇到变更时要多处修改，此处仅一个小组件就需修改3次，还有别的页面很多地方都需要修改，每一次修改都可能引入新的问题，都需要完整清楚方法的逻辑，十分影响效率。

处理后端接口数据原则：尽量以新增字段为主不要修改后端返回的数据。