vue渲染大量数据优化_Vue列表页渲染优化详解

vue列表页渲染优化，具体内容如下

想法

初始化时，vue会对data做getter、setter改造，在现代浏览器里，虽然JS已经足够快，但仍然有优化空间。

列表页的数据结构为：

Vue会给数组中的每个值设置getter和setter来监听它们的变动

但其实列表数据是不会发生变化的，这些操作是多余的。

方法一：使用Object.freeze()

Object.freeze()是ES5新增的API，用来冻结一个对象，禁止对象被修改。vue 1.0.18+以后，不会对已冻结的data做getter、setter转换。

如果确保某个data不需要跟踪依赖，可以使用Object.freeze将其冻结。需要注意的是，被冻结的是对象的值，仍然可以将引用整个替换调。看下面例子：

// 下面两种做法，界面都会响应

this.list = [

{ value: 100 },{ value: 200 }

];

this.list = Object.freeze([

{ value: 100 },{ value: 200 }

]);

}

})

当使用Vuex进行状态管理时，应当在给state.xxx赋值前使用Object.freeze():

getter和setter没有了。

方法二：传string方法

由于从后端取回的数据本身为字符串，不进行JSON.parse()直接存在state中，即可阻止Vue的改造。

使用时，在页面组件中引入字符串，JSON.parse()后可以直接赋值给this.XXX，如有需要还可以进一步子组件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

vue渲染大量数据优化_Vue列表页渲染优化详解相关推荐

php栏目页内容排序问题,Dedecms频道列表页栏目排序问题详解
织梦Dedecms频道列表页栏目排序问题详解,问题描述如下: 各位大大,小弟我想在首页调用6个栏目,typeid分别是1,2,3,4,5,40,默认的排序小弟不想要,希望改为1,40,3,4,5,2 ...
vue渲染大量数据如何优化_Vue - Table表格渲染上千数据优化
Vue - Table表格渲染上千数据优化此次项目经验会谈谈常常在项目中,针对成千上万数据渲染优化的不断探索来谈谈本身的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操做过程当 ...
生命大数据（22页PPT图文详解版华大基因董事长汪建）
2015年3月22日,新智能时代论坛在北京举行,华大基因董事长汪建作开场演讲. 近几十年来基因生命科学飞速发展,汪建董事长在演讲中对未来生命大数据治疗.防控疾病的前景作了展望,并强调了生命大数据的重要 ...
layui添加复选框_对layui初始化列表的CheckBox属性详解，初始化属性
对layui初始化列表的CheckBox属性详解,初始化属性通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式 ...
Android系统性能优化（60）---LeakCanary使用详解
Android内存优化(六)LeakCanary使用详解 1.概述如果使用MAT来分析内存问题,会有一些难度,并且效率也不是很高,对于一个内存泄漏问题,可能要进行多次排查和对比. 为了能够简单迅速 ...
阿里架构总监一次讲透中台架构，13页PPT精华详解，建议收藏
阿里架构总监一次讲透中台架构,13页PPT精华详解,建议收藏 https://www.toutiao.com/i6733390971112784391/?tt_from=weixin&utm_ ...
《数据修复技术与典型实例实战详解》——1.4 分区表的修复
本节书摘来自异步社区<数据修复技术与典型实例实战详解>一书中的第1章,第1.4节,作者:叶润华著,更多章节内容可以访问云栖社区"异步社区"公众号查看 1.4 分区表的修 ...
图解大数据 | 海量数据库查询-Hive与HBase详解
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
python列表切片后得到剩余列表_python列表切片和嵌套列表取值操作详解
python列表切片和嵌套列表取值操作详解给出列表切片的格式: [开头元素::步长] # 输出直到最后一个元素,(最后一个冒号和步长可以省略,下同) [开头元素:结尾元素(不含):步长] # 其中, ...
mysql order by 语句_Mysql优化order by语句的方法详解
本篇文章我们将了解ORDER BY语句的优化,在此之前,你需要对索引有基本的了解,不了解的老少爷们可以先看一下我之前写过的索引相关文章.现在让我们开始吧. MySQL中的两种排序方式 1.通过有序索引 ...

vue渲染大量数据优化_Vue列表页渲染优化详解

vue渲染大量数据优化_Vue列表页渲染优化详解相关推荐

最新文章

热门文章