vue 开发里面数据响应相关优化

在Vue开发中，经常会有加载大量数据的场景，如果按照原本的流程加载，Vue会对data中的数据设置数据响应式，有时候根本不需要进行响应式，仅仅是对其进行展示，这时候就可以使用Object.freeze对其进行冻结，Vue也不会再对其设置相关的响应式，页面加载速度会有一个质的提升。

冻结前

冻结后

从上面的分析结果看，将对象冻结后，响应式处理从>4000ms降到了0.2ms

<template><div id="app"><button @click="handleClick">click me</button><span>数据长度：{{ showData.length }}</span></div>
</template><script>
export default {name: "app",data() {return {showData: [],};},methods: {async handleClick() {console.time("click");this.loading = true;/*** 这里使用Object.freeze将对象冻结后，Vue内部将不再对其进行数据响应式设置*/// this.showData = Object.freeze(await this.getData());this.showData = await this.getData();this.loading = false;console.timeEnd("click");},getData() {return new Promise((resolve) => {const result = [];for (let i = 0; i < 1000000; i++) {result.push({id: i,name: `name${i}`,address: {city: `city${i}`,province: `province${i}`,},});}resolve(result);});},},
};
</script>

前端开发性能优化-Vue响应式优化相关推荐

前端开发——移动端及响应式布局解决办法总结（适配）
问题分析:前端开发一个产品(网站.系统.APP等)会遇到的一个难点就是适配问题,比如开发一个网站,你在一个页面开发的时候从视觉看起来没什么异样,换个不同分别率的设备,电脑,手机等,发现样式全乱了,这个 ...
【2019 前端进阶之路】深入 Vue 响应式原理，活捉一个 MVVM
作者:江三疯,专注前端开发.欢迎关注公众号前端发动机,第一时间获得作者文章推送,还有各类前端优质文章,致力于成为推动前端成长的引擎. 前言作为 Vue 面试中的必考题之一,Vue 的响应式原理,想必 ...
前端开发工程师（VUE框架）招聘
前端开发工程师(VUE框架) 岗位职责: 1.熟练运用HTML/JS/CSS等前端技术,精通JavaScript.Ajax.DOM.html.css等前端技术 2.熟练使用VUE前端框架,理解VUE框 ...
vue 数组删除 dome没更新_详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
VUE 响应式原理源码：带你一步精通 VUE | 原力计划
作者 | 爱编程的小和尚责编 | 王晓曼出品 | CSDN博客学过 VUE 如果不了解响应式的原理,怎么能说自己熟练使用 VUE,要是没有写过一个简易版的 VUE 怎么能说自己精通 VUE,这篇 ...
深入浅出 Vue 响应式原理！
作者 | 浪里行舟责编 | 胡巍巍 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接 ...
Vue响应式原理 vue源码(十一)
前言看过很多讲响应式的文章,大多都是告诉你们,有Observer,Dep,Wathcer类,Object.definePorperty,先会触发get中的dep.depend收集依赖,然后数据改变时 ...
深入浅出Vue响应式原理
前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接,不过理解其工作原理同样重要,这 ...
详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...

前端开发性能优化-Vue响应式优化

vue 开发里面数据响应相关优化

冻结前

冻结后

前端开发性能优化-Vue响应式优化相关推荐

最新文章

热门文章