如何提升vue.js中大型数据的性能


Posted in Javascript onJune 21, 2019

你好!欢迎大家访问VueDose的第一篇文章!我们在VueDose中开始冒险吧,你会喜欢这些对你有帮助的小技巧。

VueDose的所有的文章都非常的简洁,我相信人们在这种格式下更容易找到有用的东西。所以,让我们直奔主题。

通常我们需要获取对象数据,比如用户,项目,文章,等等等等·····

有时,我们甚至不需要修改它们,只是为了展示它们或在(a.k.a. Vuex)中存贮它们的全局状态。那么获取这个数据的简单代码如下:

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

Vue会自动循环数组的每个对象,并对每个一级属性进行响应。

对于大型数组对象来说这是一个昂贵的做法。是的,有时候你可以把这些数据分页,但是,其他人就能从前端拿到你整个数据。

谷歌地图标记通常就是这种情况,事实上它们是一个巨大的对象。

所以,在这些情况下,如果能够阻止Vue对这个数据的反应机制,我们可以获得一些性能上的提升。我们可以在添加到组件之前使用 Object.freeze 来处理数据实现这一点:

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

这个也同样适用于 Vuex:

const mutations = {
setUsers(state, users) {
state.users = Object.freeze(users);
}
};

顺便说一下,如果你想要修改数组,你可以创建一个新数组来实现。列如,在原有上添加数据项,你可以这样做:

state.users = Object.freeze([...state.users, user]);

你想知道性能提升多少?我们会在下一篇文章看到它,所以,请继续关注。

今天就到这里了!希望你会喜欢这第一篇文章

理解

这篇文章说的内容主要是如果你确定数据是纯展示用的,如果你一次请求的数据特别大的话,那么可以用 Object.freeze 来冻结你的数据,冻结了数据之后会阻止Vue的默认响应机制,会提高Vue的性能。

Object.freeze()的定义:

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

结尾

水平有限,难免有错漏之处,望各位大大轻喷的同时能够指出,跪谢!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
javascript动画算法实例分析
Jul 31 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
jQuery实现评论模块
Aug 19 jQuery
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 #Javascript
微信小程序实现点击效果
Jun 21 #Javascript
JS利用prototype给类添加方法操作详解
Jun 21 #Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 #Javascript
微信小程序实现弹出菜单动画
Jun 21 #Javascript
js类的继承定义与用法分析
Jun 21 #Javascript
js中值引用和地址引用实例分析
Jun 21 #Javascript
You might like
1 Tube Radio
2021/03/02 无线电
APMServ使用说明
2006/10/23 PHP
PHP 高级课程笔记 面向对象
2009/06/21 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
js 调整select 位置的函数
2008/02/21 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
js验证账户名是否重复
2020/05/26 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Python 对象中的数据类型
2017/05/13 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
python实现二叉树的遍历
2017/12/11 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
高中数学教学反思
2014/01/30 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
考博导师推荐信范文
2015/03/27 职场文书
人代会简报
2015/07/21 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python