import { default as 和export default Object.freeze()-冻结对象

import { default as 和export default Object.freeze()-冻结对象

import { default as

1、使用页面

index.vue

<script>
import renderTemplates from './renderTemplates.js';
export default {
  computed: {
      templateRenderList() {
        console.log('renderTemplates[this.layerName]',renderTemplates);//显示导出文件的数组
        return renderTemplates['RD_LINK'] || []
      },
  }
}
</script>

2、导入页面

src\views\subgroup\renderTemplates.js

/*------ 属性列表渲染模板 ------*/ 
/**
    * label：显示名称            
    * bindKey：后端给定的字段
    * map：针对需要转换显示内容的映射表
    [ { label: '更新记录：', bindKey: 'U_RECORD', map?: { 0: '无', 1: '新增' } } ]
-----------------------*/
// 导出的名字对应 layerName
import { default as RD_LINK } from './RdLink'
import { default as RD_LINK_ACCESSLIMIT } from './RdLinkAccessLimit'
export default {
    RD_LINK,
    RD_LINK_ACCESSLIMIT,
}

3、导出页面

src\views\subgroup\RdLinkAccessLimit.js

export default Object.freeze([
    { label: 'LINK号码798', bindKey: 'LINK_PID',isSelect: false },
    { label: '图幅号码', bindKey: 'MESH' ,isSelect: false},
    { label: '行记录ID：', bindKey: 'ROW_ID' ,isSelect: false},
    { label: '更新记录：', bindKey: 'U_RECORD',isSelect: false, map: { 0: '无', 1: '新增', 2: '删除', 3: '修改' } },
    { label: '状态：', bindKey: 'STATE', isSelect: true, map: { 0: '无', 1: '新增', 2: '删除', 3: '修改' } },
    { label: '更新时间：', bindKey: 'UPDATE_DATE',isSelect: false},
])

export default Object.freeze()

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 }
        ]);
    }
})

• 参数为对象

Object.freeze()方法可以冻结一个对象，被冻结的对象再也不能被修改。不能向被冻结对象中添加新的属性，不能删除已有的属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，修改已有属性的值。冻结对象的原型也不能被修改。

Object.freeze()返回和传入的参数是相同的,返回的是传递的对象，而不是创建一个被冻结的副本

Object.freeze()实例

<template>
  <div class="vfor">
    <div v-for="(test,index) in testObjFreeze" :key="index" style="background-color:lightblue">{{test}}</div>
  </div>
</template>
<script>
var obj={message:200}
var returnObj =  Object.freeze(obj)
export default {
  mounted(){
   //值不会改变
    this.testObjFreeze[0].value = 300
   //值会改变
    this.testObjFreeze = [{
      value:100
    },{
      value:200
    }],
    //结果为 true
    console.log("~~~~~~~~~~~~~~",obj === returnObj)
  },
  data(){
    return{
      testObjFreeze:Object.freeze([{
        value:1
      },{
        value:2
      }])
    }
  }
}
</script>

值会改变的原因

• Object.freeze()当冻结的对象里仍包含一个对象时，可以向冻结对象的对象里添加属性，修改属性值等。因此要用到深冻结

obj1 = {
  internal: {}
};

Object.freeze(obj1);
obj1.internal.a = 'aValue';

obj1.internal.a // 'aValue'

深冻结函数

// 深冻结函数.
function deepFreeze(obj) {

  // 取回定义在obj上的属性名
  var propNames = Object.getOwnPropertyNames(obj);

  // 在冻结自身之前冻结属性
  propNames.forEach(function(name) {
    var prop = obj[name];

    // 如果prop是个对象，冻结它
    if (typeof prop == 'object' && prop !== null)
      deepFreeze(prop);
  });

  // 冻结自身(no-op if already frozen)
  return Object.freeze(obj);
}

obj2 = {
  internal: {}
};

deepFreeze(obj2);
obj2.internal.a = 'anotherValue';
obj2.internal.a; // undefined

2.参数为数组
数组作为一种对象，被冻结，其元素不能被修改。没有数组元素可以被添加或移除。
3.参数为固定值(数字，字符串)
在ES5中，如果这个方法的参数不是一个对象（一个原始值），那么它会导致 TypeError。在ES2015中，非对象参数将被视为要被冻结的普通对象，并被简单地返回。