vue前端代码优化-1

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

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

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

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

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

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的过程中了解到一种需求的不同解决办法。