vue如何使用冻结对象提升代码效率及其原理解析

先给大家伙整个实际工作中一定会碰到的问题

如下vue dome ,它的代码非常简单功能也1非常简单,就是一个按钮,点击后会显示有多少条数据

来看看源码,

html部分就是一个按钮绑定了一个loadData事件,然后在p标签内展示了这个myData这个数据的长度

	<template>
	  <div id="app">
	    <button @click="loadData">加载数据</button>
	    <p>加载了{{ myData.length  }}条数据</p>
	  </div>
	</template>

js部分,可以看到loadData函数调用了getData函数,getData函数会循环十万次,得到十万个数据,然后将这十万个数据赋值给mydata

给页面渲染

	export default {
	name: 'App',
	data() {
	  return {
	    myData:[]
	  }
	},
	methods: {
	  loadData() {
	    this.myData = this.getData()
	  },
	  getData() {
	    const result = [];
	    for (let i = 0; i < 100000; i++){
	      result.push({
	        id: i,
	        name: `my name is ${i}`,
	        son: {
	          id: `${i+1}`,
	          name:`His name is ${i+1}`
	        }
	      })
	    }
	    return result
	  }
	},

现在的情况是,当点击按钮时,页面要过很久才做出响应,.打开i控制台使用性能分析器记录可以看到如下显示

渲染和绘制的事件加起来才用6ms,当然这也是对的,本来也就显示一个按钮和一段文本,用不了多长时间

主要是script脚本运行时间长,用来6635 ms,这也太久了,

既然是script耗费了这么多时间,那么点开事件树,一路展开,

可以发现getData这个函数只用了348ms才占用了百分之5.2的时间,proxySetter这个函数占用6647.8ms,也就是说,效率主要损耗在这个函数里面了,

再接着展开proxySetter,于是就发现了老朋友observe,能来花时间看这篇文章的都是学过vue的,对这个函数应该都很熟悉,

不熟悉也没关系,你只要知道vue就是靠这个来完成响应式的.它遍历数组,遍历对象,遍历它们里面的每一个属性,而且是深度遍历,

给每一个属性使用Object.defineProperty来进行响应式处理,所以时间主要损耗在这里,

但是很多时候,并不是每一个数据都需要使用响应式,就如同这个dome中的例子,只是想简简单单的展示一下这个数据的长度,这个数据的内容

又不会变化,没必要给它添加响应式

那有没有什么办法解决这个问题呢?

有,可以使用一段简单的代码,如下

	loadData() {
	  this.myData =Object.freeze(this.getData()) 
	},

使用这段代码给不希望vue处理的对象冻结了.vue会判断这个对象是否被冻结了,如果被冻结了,就不会再去给他遍历添加侦听了,

再次使用性能分析查看,可以发现这次只用了五百多毫秒.