vue项目性能优化之——Object.freeze()

如果你有一个巨大的数组或Object，并且确信数据不会修改，通过 Object.freeze 方法来冻结一个对象，可以让性能大幅提升。

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

在vue中的data或者vuex里使用Object.freeze(), 这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。 官网链接

例如冻结一个Object：

  <div id="app">
    <p>{{ freezeObject.name }}</p>
    <!-- 这里的 `freezeObject.name` 不会更新，会抛出 TypeError -->
    <button v-on:click="change">Change it</button>
  </div>
  
  data() {
    return {
      freezeObject: Object.freeze({
        name: '小红'
      })
    }
  },
  methods: {
  change(){
     this.freezeObject.name = '小明';
  }
}

如果直接更改freezeObject的引用，数据会更改，视图会更新：

 change(){
    let freezeTest = {
        name: '小白'
      }
      this.freezeObject = freezeTest;
   }

冻结数组：

  <div id="app">
    <p>{{ freezeArr[0] }}</p>
    <!-- 这里的 `freezeArr[0]` 不会更新会抛出 TypeError -->
    <button v-on:click="change">Change it</button>
  </div>
    data() {
    return {
      freezeArr: Object.freeze([1])
      }
    },
   methods: {
     change(){
        this.freezeArr[0] = 2;
        //或者
         this.freezeArr.push(2);
    }
}
    

注意：这里冻结的是数组，如果冻结的是数组对象，就不管用了

Object.isFrozen(obj); //返回Boolean值， 查看是否被冻结

在ES5中，如果这个方法的参数不是一个对象（一个原始值），那么它会导致 TypeError。在ES2015中，非对象参数将被视为要被冻结的普通对象，并被简单地返回。

> Object.freeze(1)
TypeError: 1 is not an object // ES5 code

> Object.freeze(1)
1