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

你好！欢迎大家访问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() 返回和传入的参数相同的对象。

结尾

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

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

赞 (0)

相关推荐

  • 浅谈Vue 初始化性能优化

    前言 一般来说,你不需要太关心vue的运行时性能,它在运行时非常快,但付出的代价是初始化时相对较慢.在最近开发的一个Hybrid APP里,Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms,这让我开始重视vue的初始化性能,并最终优化到200 ~ 300ms,这篇文章分享我的优化思路. 性能瓶颈在哪里? 先看一下常见的vue写法:在html里放一个app组件,app组件里又引用了其他的子组件,形成一棵以app为根节点的组件树. <body> <

  • Cookbook组件形式：优化 Vue 组件的运行时性能

    Vue 2.0 在发布之初,就以其优秀的运行时性能著称,你可以通过这个第三方 benchmark来对比其他框架的性能.Vue 使用了 Virtual DOM 来进行视图渲染,当数据变化时,Vue 会对比前后两棵组件树,只将必要的更新同步到视图上. Vue 帮我们做了很多,但对于一些复杂场景,特别是大量的数据渲染,我们应当时刻关注应用的运行时性能. 本文仿照Vue Cookbook组织形式,对优化 Vue 组件的运行时性能进行阐述. 基本的示例 在下面的示例中,我们开发了一个树形控件,支持基本的树

  • vue短信验证性能优化如何写入localstorage中

    平时我们在项目中进行注册等的时候,会经常用到短信验证的功能,但是现在现在很多短信验证都是存在下面几个问题,例如短信验证时间为60s的时候, 1. 当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击 2.当点击按钮倒计时开始,例如在50s的时候我关闭了浏览器,过了5s后,我在打开,此时时间倒计时的时间应该是45s左右,但是当重新打开浏览器的时候,按钮又可以重新点击了 为了解决上面的两个问题,就需要把时间都写到localstorage里面去,当打开页面的时候,就去loca

  • 使用异步组件优化Vue应用程序的性能

    单页应用其一个问题是首屏屏渲染速度较慢.这是因为页面首次加载时服务器将向客户端发送大量JavaScript,在屏幕上显示任何内容之前必须下载并解析.可以想象,随着应用程序规模的扩大,这个问题对用户体验的影响也会越来越突出. 现在幸运的是,当使用Vue CLI构建Vue应用程序时(使用webpack),可以采取一些措施来抵消这种情况.在本文中,我将演示如何在应用程序的初始渲染之后使用 异步组件 和webpack的代码分割功能加载到页面的某些部分.这将使初始加载时间降至最低,并为您的应用程序提供更好

  • mpvue性能优化实战技巧(小结)

    最近一直在折腾mpvue写的微信小程序的性能优化,分享下实战的过程. 先上个优化前后的图: 可以看到打包后的代码量从813KB减少到387KB,Audits体验评分从B到A,效果还是比较明显的.其实这个指标说明不了什么,而且轻易就可以做到,更重要的是优化小程序运行过程中的卡顿感,请耐心往下看. 常规优化 常规的Web端优化方法在小程序中也是适用的,而且不可忽视. 一.压缩图片 这一步最简单,但是容易被忽视.在tiny上在线压缩,然后下载替换即可. 我这项目的压缩率高达72%,可以说打包后的代码从

  • 浅谈Vue 性能优化之深挖数组

    背景 最近在用 Vue 重构一个历史项目,一个考试系统,题目量很大,所以核心组件的性能成为了关注点.先来两张图看下最核心的组件 Paper 的样式. 从图中来看,分为答题区与选择面板区. 稍微对交互逻辑进行下拆解: 答题模式与学习模式可以相互切换,控制正确答案显隐. 单选与判断题直接点击就记录答案正确性,多选是选择答案之后点击确定才能记录正确性. 选择面板则是记录做过的题目的情况,分为六种状态(未做过的,未做过且当前选择的,做错的,做错的且当前选择的,做对的,做对的且当前选择的),用不同的样式去

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

    你好!欢迎大家访问VueDose的第一篇文章!我们在VueDose中开始冒险吧,你会喜欢这些对你有帮助的小技巧. VueDose的所有的文章都非常的简洁,我相信人们在这种格式下更容易找到有用的东西.所以,让我们直奔主题. 通常我们需要获取对象数据,比如用户,项目,文章,等等等等····· 有时,我们甚至不需要修改它们,只是为了展示它们或在(a.k.a. Vuex)中存贮它们的全局状态.那么获取这个数据的简单代码如下: export default { data: () => ({ users:

  • 提升node.js中使用redis的性能遇到的问题及解决方法

    问题初现 某基于node.js开发的业务系统向外提供了一个dubbo服务,提供向第三方缓存查询.设置多项业务数据并聚合操作结果.在QPS达到800时(两台虚拟机,每台机器4Core8G4node进程),在监控平台上出现了非常多的slow rt警告,平均接口响应达到60+ms,请求报警率达到80%+. 为找到造成该服务吞吐量过低的罪魁祸首,业务人员在请求日志中打点了所有查询缓存的操作,结果显示每个请求查询缓存耗时在50-100ms之间跳动.查询了redis-server的监控数据发现,不存在ser

  • vue.js中使用echarts实现数据动态刷新功能

    在vue使用echarts时,可能会遇到这样的问题,就是直接刷新浏览器,或者数据变化时,echarts不更新? 这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染,这是实现本需求的基础.我们再设想一下, 如果想要支持数据的自动刷新,必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据. 所幸Vue为我们提供了==watcher==功能,通过它我们可以很方便的实现上述功能: watch:{ option:function(newval

  • Vue.js中的高级面试题及答案

    Vue-loader 是 Webpack 的加载模块,它使我们可以用 Vue 文件格式编写单文件组件. 单文件组件文件有三个部分,(模板.脚本和样式). vue-loader 模块允许 webpack 使用单独的加载模块 (例如 SASS 或 SCSS 加载器) 提取和处理每个人部分.该设置使我们可以使用 Vue 文件无缝编写程序. vue-loader 模块还允许把静态资源视为模块依赖性,并允许使用 webpack 加载器进行处理. 而且还允许还开发过程中进行热重装. 2.prop 如何指定其

  • Vue.js中的组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技术的诞生,都是为了解决特定的问题.组件的出现就是为了解决页面布局等等一系列问题.vue中的组件分为两种,全局组件和局部组件. 组件的注册 全局组件的注册 通过Vue.component()创建一个全局组件之后,我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使

  • vue.js中指令Directives详解

    vue.js中指令Directives详解

    想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令

  • 在vue.js中抽出公共代码的方法示例

    在vue.js中抽出公共代码的方法示例

    前言 当我们在使用vue构建中大型项目时,通常会遇到某些经常用的方法以及属性,比如说搭建一个员工管理系统,请求的url需要一个共同的前缀,或者在某几个view中需要用到时间,这个时间是通过某方法格式化之后的等等,如果每次用到都写共同的代码,那样如果之后有变动的话维护起来会非常麻烦. 所以我们就得想办法抽出公共代码,因为vue是组件化开发,我们就会很自然的与es6的module模块化联系到一起.其实当我们在搭建项目结构时就应该先提前埋下伏笔,有一个util文件夹,里面放的就是我们要写的公共代码,其

  • Vue.js中数组变动的检测详解

    前言 最近在尝试用Vue.js重构公司的现有业务代码,组件化的设计思路和MVVM的思想让我深深沉迷于其中.但是是踩到了不少坑,就比如这篇文章介绍的数组绑定后的更新检测. 相信大家都知道Observer,Watcher,vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.在 vue.js中$watch的用法示例 中,我们讨论了如何实现基本的 watch . 接下来,我们来看看如何实现数组变动检测. 例子: // 创建 vm let vm = new Vue({ data: {

  • 深入理解vue.js中$watch的oldvalue与newValue

    $watch中的oldvalue和newValue 大家都知道,在vue.js中给我们提供了$watch的方法来做对象变化的监听,而且在callback中会返回两个对象,分别是oldValue和newValue. 顾名思义,这两个对象就是对象发生变化前后的值. 但是在使用过程中我发现这两个值并不总是预期的.下面来一起看看详细的介绍: 定义data的值 data: { arr: [{ name: '笨笨', address: '上海' }, { name: '笨笨熊', address: '北京'

  • Vue.js中数据绑定的语法教程

    数据绑定语法 Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新.

随机推荐