Vue 代码优化技巧：提升性能和可读性

本文介绍了如何优化 Vue 代码以提高性能和可读性，涵盖以下方面：

减少不必要的变量和数据解析操作
- 将 JSON.parse 操作提取到函数外部，避免每次函数调用都要重新解析字符串。
优化循环操作
- 使用 forEach 函数操作，避免重复操作。
尽量使用 ES6 语法糖和函数式编程的特性
- 使用箭头函数、map、filter 等函数，简化代码并提高可读性。
将重复的代码抽象成函数
- 提高代码复用性和可维护性。
使用更加语义化的变量名和函数名
- 提高代码可读性。

优化示例

const infoStr = '[{"2023-02-22": {"3014": {"Num":2,"Maxnumber":33}}},{"2023-02-23": {"3014": {"Num":2,"Maxnumber":33}}}]';
const Jsoninfo = {
  "1000": "刷新视野耗时",
  "1001": "拾取触发耗时",
  "1003": "穿戴装备触发",
  "1004": "脱下装备触发",
  "1006": "吃物品触发",
  "1011": "点击NPC执行耗时",
  "5016": "小精灵拾取",
  "3014": "攻击触发",
  "10101": "攻击触发",
  "10049": "加经验"
};

function parseLog(val) {
  const temp = [];
  const allinfo = {};

  const infoList = JSON.parse(infoStr);

  val.forEach(log => {
    const textinfo = log.substring(26);
    const logTime = log.substring(1, 11);

    if (textinfo.includes('MsgTime')) {
      const subTextList = textinfo.split(' ');

      subTextList.forEach(subText => {
        const i = subText.lastIndexOf('-');
        if (i !== -1 && subText.includes('MsgTime')) {
          const outTime = subText.substr(i + 1);
          const msgTimeId = subText.substring(7, i);
          let remarks = Jsoninfo[msgTimeId];
          if (!remarks) {
            remarks = '未知行为';
          }

          if (outTime > 31) {
            let logInfo = allinfo[logTime];
            if (!logInfo) {
              logInfo = {};
              logInfo[msgTimeId] = { Num: 1, Maxnumber: outTime };
              allinfo[logTime] = logInfo;
            } else {
              let msgInfo = logInfo[msgTimeId];
              if (!msgInfo) {
                msgInfo = { Num: 1, Maxnumber: outTime };
                logInfo[msgTimeId] = msgInfo;
              } else {
                const num = msgInfo.Num + 1;
                const maxNumber = msgInfo.Maxnumber > outTime ? msgInfo.Maxnumber : outTime;
                msgInfo.Num = num;
                msgInfo.Maxnumber = maxNumber;
                logInfo[msgTimeId] = msgInfo;
              }
              allinfo[logTime] = logInfo;
            }

            temp.push({
              date: logTime,
              name: subText,
              address: remarks
            });
          }
        }
      });
    }
  });

  console.log(allinfo);

  return temp;
}

通过以上优化，代码更加简洁、高效，可读性也得到了提升。

希望本文对您有所帮助！