首页 网络技术
  1. 正文

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赋值。

export default {data: () => ({users: []}),async created() {const users = await axios.get("/api/users");this.users = Object.freeze(users);},methods:{// 改变值不会触发视图响应this.users[0] = newValue// 改变引用依然会触发视图响应this.users = newArray}};

本文标题:vue长列表性能优化的示例分析
本文链接:https://www.qqooo.cn/post/6926.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!