在vue中的应用：如果你有一个巨大的数组或Object，并且确信数据不会修改，可以使用
Object.freeze()方法冻结该数据，这样vue就不会对该对象的getter和setter做转换，从而让性能得以大幅提升。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span v-for="item in list">{{item.name}}</span>
</div>
<script type="text/javascript" src="../../../js/lib/vue-2.5.21.js"></script>
<script>
'use strict'
new Vue({
el: '#app',
data() {
return {
list: Object.freeze([{
name: '1'
}, {
name: '2'
}])
}
},
mounted() {
this.list[0].name = '3' // 不会生效
// 如果直接改变this.list 的引用，就会生效
this.list = [{name: 4}]
// 或
this.list = Object.freeze([{name: 4}])
}
})
</script>
</body>
</html>
AI 代码解读
Object.freeze()
Object.freeze()方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。
var obj = {
prop: function() {},
foo: 'bar'
}
// 正常我们可以修改属性值或者删除属性
obj.foo = 'bas'
obj.lumpy = 'woof'
delete obj.prop
当obj被冻结后
var o = Object.freeze(obj)
o === obj // true
// 现在任何改变都会失效
obj.foo = '23' // 静默地不会做任何事，在严格模式下会抛出错误 TypeErrors
// 试图通过 Object.defineProperty 更改属性
// 下面两个语句都会抛出 TypeError.
Object.defineProperty(obj, 'ohai', { value: 17 });
Object.defineProperty(obj, 'foo', { value: 'eit' });
// 也不能更改原型
// 下面两个语句都会抛出 TypeError.
Object.setPrototypeOf(obj, { x: 20 })
obj.__proto__ = { x: 20 }
同样数组也会被冻结
let a = [0];
Object.freeze(a); // 现在数组不能被修改了.
a[0]=1; // fails silently
a.push(2); // fails silently
// In strict mode such attempts will throw TypeErrors
function fail() {
"use strict"
a[0] = 1;
a.push(2);
}
fail();
冻结对象为浅冻结
AI 代码解读
