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>