vue中的Object.freeze语法介绍

一.官方解释

在 Vue 的文档中介绍数据绑定和响应时，特意标注了对于经过 Object.freeze() 方法的对象无法进行更新响应。因此，特意去查了 Object.freeze() 方法的具体含义。

含义:

Object.freeze() 方法用于冻结对象，禁止对于该对象的属性进行修改（由于数组本质也是对象，因此该方法可以对数组使用）。在 Mozilla MDN 中是如下介绍的：

可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改

该方法的返回值是其参数本身。

二.注意点:

  1. const和Object.freeze()完全不同

  • const的行为像 let。它们唯一的区别是， const定义了一个无法重新分配的变量。 通过 const声明的变量是具有块级作用域的，而不是像 var声明的变量具有函数作用域。
  • Object.freeze()接受一个对象作为参数，并返回一个相同的不可变的对象。这就意味着我们不能添加，删除或更改对象的任何属性。
  • const和Object.freeze()并不同，const是防止变量重新分配，而Object.freeze()是使对象具有不可变性。
三.详细介绍

场景:一个长列表数据,一般不会更改,但是vue会做getter和setter的转换

用法:是ES5新增的特性，可以冻结一个对象，防止对象被修改

支持:vue 1.0.18+对其提供了支持，对于data或vuex里使用freeze冻结了的对象，vue不会做getter和setter的转换
注意:冻结只是冻结里面的单个属性,引用地址还是可以更改

 1 new Vue({
 2     data: {// vue不会对list里的object做getter、setter绑定        
 3     list: Object.freeze([{ value: 1 },{ value: 2 }])},    
 4     mounted () {// 界面不会有响应,因为单个属性被冻结
 5         this.list[0].value = 100;
 6     // 下面两种做法，界面都会响应
 7        this.list = [{ value: 100 },{ value: 200 }];    
 8     this.list = Object.freeze([{ value: 100 },{ value: 200 }]);
 9     }
10 })

四.总结.

Object.freeze包起来的整个对象里,如果相对某一个属性做修改,那是不可以的,是不支持的,因为单个属性是被冻结的,

而对整个对象进行赋值等操作是可以进行响应的


转载于:
链接：https://juejin.cn/post/6844903922469961741

 

posted @ 2021-08-26 11:41  rookiexwang  阅读(529)  评论(0)  编辑  收藏  举报