vue长列表性能优化

我们应该都知道 vue会通过 object.defineProperty对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 vue来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 vue劫持我们的数据呢？可以通过 object.freeze方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");

    this.users = Object.freeze(users);
  }
};

另外需要说明的是，这里只是冻结了 users的值，引用不会被冻结，当我们需要 reactive数据的时候，我们可以重新给 users赋值。

methods: {
    handelClick() {
      const newArr = [7, 8, 9, 10];
      this.users = newArr;
    }
  }