丁鹿学堂：vue之性能优化实践总结（一）

vue中长列表的不做响应式

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

export default {
  data(){
    return {
       goodsList: []
    }
  },
    async created() {
      const goodsList = await axios.get("/api/goods");
      this.goodsList = Object.freeze(goodsList);
    }
  };

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

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

 <div  v-if="x > 18">   、
     <div  v-for="(item) in list" :key="item" ></div>
 </div>

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

computed: {
     userList() {
       return this.list.filter( item => {
         return item.sex === 1
      })
    }
  }

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的节省性能就越有必要。