前端培训丁鹿学堂：vue的性能优化（一）

vue中长列表的不做响应式

针对实际应用中一些商品列表，用户列表这类只是做数据展示而很少会动态改变数据，就不对数据做响应式处理，可以很大的提升渲染速度。
vue的源码中也支持我们这么做。
方法：利用Object.freeze()
这个方法是冻结对象，就是对象不能被修改。
实际用用的例子

export default {
  data(){
    return {
       goodsList: []
    }
  },
    async created() {
      const goodsList = await axios.get("/api/goods");
      this.goodsList = Object.freeze(goodsList);
    }
  };
1
2
3
4
5
6
7
8
9
10
11

v-for和v-if不要同时使用

在 Vue2 中 v-for 优先级更高，所以编译过程中会把列表元素全部遍历生成虚拟 DOM，再来通过 v-if 判断符合条件的才渲染，这样造成性能的浪费。
正确的使用方式是用v-if去嵌套v-for

 
   、
     

 
1
2
3

如果要根据列表中某个值去判断渲染的话，可以使用计算属性先过滤一遍数组，再进行v-for 的渲染

computed: {
     userList() {
       return this.list.filter( item => {
         return item.sex === 1
      })
    }
  }
1
2
3
4
5
6
7

v-for的渲染列表使用唯一的key

这个想必大家都知道，如果项目中使用eslint的话也会有提示。但是我们要注意的是，key是必不可少的，但是key值也要是唯一的。
不建议开发中使用数组的 index 作为 key 的原因
因为在不使用 key 或者列表的 index 作为 key 的时候，每个元素对应的位置关系都是 index，如果这个时候数组长度有变化的话，index也会变化，所以用index是有风险的。
一般后端给到我们的数据都有一个唯一的id，我们用它作为key就可以了。

如果是频繁显示隐藏的元素，用v-show代替v-if

v-show是是渲染组件，然后改变组件的 display 为 block 或 none。而v-if是渲染或不渲染组件或者元素。如果是频繁显示隐藏的话，使用v-show可以节省性能，dom嵌套越多，结构越复杂，使用v-show的节省性能就越有必要。