12 个 Vue 开发中的性能优化小技巧

1. 长列表性能优化

1. 不做响应式

比如会员列表、商品列表之类的，只是纯粹的数据展示，不会有任何动态改变的场景下，就不需要对数据做响应化处理，可以大大提升渲染速度

比如使用 ​​Object.freeze()​​ 冻结一个对象，MDN的描述是 该方法冻结的对象不能被修改；即不能向这个对象添加新属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值，以及该对象的原型也不能被修改

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

Vue2 的响应式源码地址：​​src/core/observer/index.js - 144行​​ 是这样的

export function defineReactive (...){
   const property = Object.getOwnPropertyDescriptor(obj, key)
   if (property && property.configurable === false) {
       return
  }
   ...
}

可以看到一开始就判断 ​​configurable​​​ 为 ​​false​​ 的直接返回不做响应式处理