如何提升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读取ASP设定的COOKIE
Nov 24 Javascript
Firefox window.close()的使用注意事项
Apr 11 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
js实现时钟定时器
Mar 26 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
配置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
PHP版自动生成文章摘要
2008/07/23 PHP
php 缓存函数代码
2008/08/27 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
Python实现统计文本文件字数的方法
2017/05/05 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
PHP开发的一般流程
2013/08/13 面试题
企业演讲稿范文大全
2014/05/20 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
高考学习决心书
2015/02/04 职场文书
离婚被告答辩状
2015/05/22 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle