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;
    }
  }

 

上一篇:android – 应用程序冻结Camera.Release()


下一篇:mysql – Hibernate / Spring:getHibernateTemplate().save(…)冻结/挂起