vue项目性能优化实践

v-for 遍历避免同时使用 v-if

v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度。
一般我们实现一个列表循环，并且有条件的显示一些内容，如下：

  <ul>
    <li v-for="elem in elemArray" :key="elem.key" v-if='elem.show'>
    {{elem.name}}
    </li>
  </ul>

优化

  <ul>
    <li v-for="elem in elemArray" :key="elem.key">{{elem.name}}</li>
  </ul>
  
  data() {
    return {
      lists: [{
        show: false,
        name: '标题1'
      }, {
        show: true,
        name: '标题2'
      }, {
        show: true,
        name: '标题3'
      }, {
        show: false,
        name: '标题4'
      }],
    }
  },
  computed: {
    elemArray() {
      return this.lists.filter((item) => {
        return item.show
      })
    }
  },
  

如果项目中有使用eslint-loader，v-for和v-if一起使用会报错：
error The 'elemArray' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'

解决办法就是上边的方法，v-for和v-if不能一起使用，要用computed做一个数据筛选。