Vue之Object.freeze()性能优化，及const区别

Object.freeze()

• ES5新增属性，用于冻结对象，禁止对于该对象（数组本质为数组，也可以对数组）的属性进行修改；（不能添加删除修改任何，原型也不行）；

• 返回值为参数本身

  let a = {prop:1}
  Object.freeze(a)// 返回值{prop:1}
  

• const和Object.freeze()区别？

  • const防止变量重新分配；

  • Object.freeze()是使对象具有不可变性；

• Object.freeze()是浅冻结（一层的内种）

• 提升性能

  Vue初始化时，Object.defineProperty会对data进行一个getter、setter的操作（Vue会对数据进行追中， 在属性被访问和修改时通知变化）；Object.freeze()冻结后，不能对这个对象新增修改删除属性，Vue不会对其进行getter、setter等数据劫持方法，减少了observe的开销；

• 影响？

  对于冻结属性，Vue无法实现v-model

• 适用场景？

  展示类场景，例如大屏；

• Object.freeze()冻结的是值，仍然可以将变量的引用替换掉；

  <p v-for="item in list">{{ item.value }}</p>
  

  new Vue({
      data: {
          // vue不会对list里的object做getter、setter绑定
          list: Object.freeze([
              { value: 1 },
              { value: 2 }
          ])
      },
      created () {
          // 界面不会有响应
          this.list[0].value = 100;
  
          // 下面两种做法，界面都会响应
          this.list = [
              { value: 100 },
              { value: 200 }
          ];
          this.list = Object.freeze([
              { value: 100 },
              { value: 200 }
          ]);
      }
  })