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

持续创作，加速成长！这是我参与「掘金日新计划 · 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是直接修改了指向，冻结是无法修改对象自身的属性。

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