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中,非对象参数将被视为要被冻结的普通对象,并被简单地返回。