vue前端代码优化

也许有人会感觉CR没有什么卵用，只要我代码实现了功能，我完成了开发任务，我就OK了，为啥还要CR??   但是CR真的是有必要的，你不仅可以发现自己代码中的不足之处，待优化点，简洁明了的代码易读别人接手也会很快。

1. 比如在vue项目中只有某一个组件用某一个特别长的常量对象，如果你只是把常量直接放在该组件下的data中，不仅代码不易读，而且会被watch，影响性能，因为常量是不变的，不用被watch。这个时候Object.freeze()就起作用了，估计很多人都没用过这个特性，先来了解一下：

Object.freeze()是ES5新增的特性，可以冻结一个对象，防止对象被修改。 如果你有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升。对于纯展示的大数据，可以使用Object.freeze提升性能。

• 优化代码前：可读性差；直接放到data中，会被watch，实际上并不需要被watch

<script>
export default {
  data() {
    tableData: {
      test1: '测试测试1测试1测试1测试1测试1测试11',
      test2: '测试测试2测试2测试2测试2测试2测试22',
      test3: '测试测试3测试3测试3测试3测试3测试33',
      test4: '测试测试4测试4测试4测试4测试4测试44',
      test5: '测试测试5测试5测试5测试5测试5测试55',
      test6: '测试测试6测试6测试6测试6测试6测试66',
      test7: '测试测试7测试7测试7测试7测试7测试77',
      test8: '测试测试8测试8测试8测试8测试8测试88',
      test9: '测试测试9测试9测试9测试9测试9测试99',
      test10: '测试测试10测试10测试10测试10测试10测试1010'
    }
  }
}
</script>

• 优化代码后：vue不会对tableData里的object做getter、setter绑定,提升性能

<script>
// 如果是多个文件都用到这个，放在constant.js文件中
const TABLEDATA = {
  test1: '测试测试1测试1测试1测试1测试1测试11',
  test2: '测试测试2测试2测试2测试2测试2测试22',
  test3: '测试测试3测试3测试3测试3测试3测试33',
  test4: '测试测试4测试4测试4测试4测试4测试44',
  test5: '测试测试5测试5测试5测试5测试5测试55',
  test6: '测试测试6测试6测试6测试6测试6测试66',
  test7: '测试测试7测试7测试7测试7测试7测试77',
  test8: '测试测试8测试8测试8测试8测试8测试88',
  test9: '测试测试9测试9测试9测试9测试9测试99',
  test10: '测试测试10测试10测试10测试10测试10测试1010'
};

export default {
  data() {
    tableData: Object.freeze(TABLEDATA)
  }
}
</script>

2. 想知道某一个对象数组中是否有符合要求的属性值，some()方法了解一下。

some() 方法用于检测数组中的元素是否满足指定条件

想知道对象数组中的是否有属性isEdit为true的数据

• 优化代码前：

export default {
  methods() {
    validateTable(arr) {
        let flag = false;
        if (arr.filter(item => item.isEdit).length) {
            flag = true;
        }
        return flag;
    }
  }
}

• 优化代码后：代码简洁明了

export default {
  methods() {
    validateTable(arr) {
      return arr.some(item => item.isEdit);
    }
  }
}

3. 有时候需要连续初始化vuex好几个平级的属性值，可能某一个方法要调用好几次，代码虽然容易理解，这个时候如果通过配置数据遍历传参更新相应数据会更好，简洁易读，便于之后的代码维护

• 优化代码前：

export default {
  methods() {
    ...mapAtions([
      'updateState'
    ]),
    initState() {
      this.updateState('state1', false);
      this.updateState('state2', false);
      this.updateState('state3', false);
    },

    checkState(state) {
      if (state === 'state1') {
        this.updateState('state1', true);
      } else if (state === 'state2') {
        this.updateState('state2', true);
      } else if (state === 'state3') {
        this.updateState('state3', true);
      }
    }
  }
}

• 优化代码后：通过配置数据遍历处理数据是不是更加简洁明了了

const STATE_MAPPING = {
  state1: 'state1',
  state2: 'state2',
  state3: 'state3'
};

export default {
  methods() {
    ...mapAtions([
      'updateState'
    ]),
    initState() {
      Object.keys(STATE_MAPPING).forEach(key => this.updateState(STATE_MAPPING[key], false));
    },
    checkState(state) {
      this.updateState(STATE_MAPPING[state], true);
    }
  }
}

优化后的代码是不是很简洁明了，通过CR你会发现自己代码的不足之处，也会在CR的过程中了解到一种需求的不同解决办法。