前端性能优化-番外篇-Object.freeze到底用在哪

·  阅读 38

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第8天,点击查看活动详情

对于前端纯大数据展示,不需要做修改其中字段等处理的,使用Object.freeze方法来包裹变量,vue内部不再去监听数据的变化提高性能。

话是这么说,官方资料这么写:

developer.mozilla.org/zh-CN/docs/…

但是,问题又来了,这个Object.freeze我应该用在哪个变量上呢?

现有代码段如下:

// res是axios请求的返回数据,basicInfoData是vue上挂的变量
this.basicInfoData = res.data.page.list
console.log(this.basicInfoData, 111)
复制代码

冻结一:

Object.freeze(res)
this.basicInfoData = res.data.page.list
console.log(this.basicInfoData, 222)
this.basicInfoData.test = 99
复制代码

打印出来的变量222和111一模一样,给basicInfoData添加变量成功。

冻结二:

this.basicInfoData = Object.freeze(res.data.page.list)
console.log(this.basicInfoData, 222)
this.basicInfoData.test = 99
复制代码

打印出来的变量222和111明显不同,虽然freeze后少了__ob__,但是__proto__多了很多函数,给basicInfoData添加变量报错。

在这里插入图片描述

冻结三:

this.basicInfoData = res.data.page.list
Object.freeze(this.basicInfoData)
console.log(this.basicInfoData, 222)
this.basicInfoData.test = 99
复制代码

打印出来的变量222和111一模一样(id忽略),给basicInfoData添加变量报错。

在这里插入图片描述

综上所述,自言自语:

  • 冻结一:冻结的是整个变量res,且res是局部变量不是挂在vue上的,且后续赋值是将res的部分赋值给basicInfoData,所以此处冻结无效,仍然可以修改变量。

官方言论:

如果一个属性的值是个对象,则这个对象中的属性是可以修改的,除非它也是个冻结对象。

  • 冻结二:将res.data.page.list冻结后赋值给basicInfoData,同事说这样减少了basicInfoData的体积,应该这么做,但为什么反而__proto__函数增加了那么多呢?

  • 冻结三:直接冻结basicInfoData,被冻结对象自身的所有属性都不可能以任何方式被修改,所以修改变量失效。但是再次执行

this.basicInfoData = res.data.page.list
Object.freeze(this.basicInfoData)
复制代码

是没有问题的,大概是因为是list是直接修改了指向,冻结是无法修改对象自身的属性。

所以问题来了,应该是用冻结二还是三呢?

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改