在vue中，資料凍結「Object.freeze()」方法用於凍結對象，禁止對於該對象的屬性進行修改（由於數組本質也是對象，因此該方法可以對數組使用）。物件凍結後，無法刪除已有屬性，無法修改該物件已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值；此外，凍結一個物件後該物件的原型也不能被修改。
本教學操作環境：windows7系統、vue3版，DELL G3電腦。
在 Vue 的文件中介紹資料綁定和回應時，特意標註了對於經過 Object.freeze() 方法的物件無法進行更新回應。因此，特意去查了 Object.freeze() 方法的具體意義。
Object.freeze() 方法用於凍結對象，禁止對於該對象的屬性進行修改（由於數組本質也是對象 ，因此該方法可以對數組使用）。在 Mozilla MDN 中是如下介紹的：
可以凍結一個物件。一個被凍結的物件再也不能被修改；凍結了一個物件則不能向這個物件新增新的屬性，
不能刪除已有屬性，不能修改該物件已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結物件後該物件的原型也不能被修改
該方法的回傳值是其參數本身。
要注意的是以下兩點
1、Object.freeze() 和 const 變數宣告不同，也不承擔 const 的功能。
const和Object.freeze()完全不同
以下程式碼是正確的：
2、Object.freeze() 是“淺凍結”，以下程式碼是生效的:
常規用法
明顯看到，a 的prop 屬性未改變，即使重新賦值了。
"深凍結"
要完全凍結具有嵌套屬性的對象，您可以編寫自己的函式庫或使用已有的函式庫來凍結對象，如Deepfreeze或immutable-js
#
// 深冻结函数.
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);
}其實就是個簡單的遞歸方法。但牽涉到一個很重要，但是在寫業務邏輯的時候很少使用的知識點 Object.getOwnPropertyNames(obj) 。我們都知道在 JS 的 Object 中存在著原型鏈屬性，透過這個方法可以取得所有的非原型鏈屬性。
Object.freeze()提升效能#除了元件上的最佳化，我們還可以對vue的依賴改造入手。初始化時，vue會對data做getter、setter改造，在現代瀏覽器裡，這個過程其實挺快的，但仍有最佳化空間。
Object.freeze() 可以凍結一個對象，凍結之後不能向這個對象添加新的屬性，不能修改其已有屬性的值，不能刪除已有屬性，不能修改該物件已有屬性的可枚舉性、可配置性、可寫性。此方法傳回被凍結的物件。
當你把一個普通的JavaScript 物件傳給Vue 實例的 data 選項，Vue 將遍歷此物件所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉為getter/setter，這些getter/setter 對使用者來說是看不見的，但在內部它們讓Vue 追蹤依賴，在屬性被存取和修改時通知變化。
但 Vue 在遇到像 Object.freeze() 这样被设置为不可配置之后的对象属性时，不会为对象加上 setter getter 等数据劫持的方法。参考 Vue 源码
Vue observer 源码
在基于 Vue 的一个 big table benchmark 里，可以看到在渲染一个一个 1000 x 10 的表格的时候，开启Object.freeze() 前后重新渲染的对比。
big table benchmark
开启优化之前
开启优化之后
在这个例子里，使用了 Object.freeze()比不使用快了 4 倍
Object.freeze() 的性能会更好不使用Object.freeze() 的CPU开销
使用 Object.freeze()的CPU开销
对比可以看出，使用了 Object.freeze() 之后，减少了 observer 的开销。
Object.freeze()应用场景由于 Object.freeze()会把对象冻结，所以比较适合展示类的场景，如果你的数据属性需要改变，可以重新替换成一个新的 Object.freeze()的对象。
修改 React props React生成的对象是不能修改props的, 但实践中遇到需要修改props的情况. 如果直接修改, js代码将报错, 原因是props对象被冻结了, 可以用Object.isFrozen()来检测, 其结果是true. 说明该对象的属性是只读的.
那么, 有方法将props对象解冻, 从而进行修改吗?
事实上, 在javascript中, 对象冻结后, 没有办法再解冻, 只能通过克隆一个具有相同属性的新对象, 通过修改新对象的属性来达到目的.
可以这样:
ES6: Object.assign({}, frozenObject);
lodash: _.assign({}, frozenObject);来看实际代码:
function modifyProps(component) {
let condictioin = this.props.condictioin,
newComponent = Object.assign({}, component),
newProps = Object.assign({}, component.props)
if (condictioin) {
if (condictioin.add) newProps.add = true
if (condictioin.del) newProps.del = true
}
newComponent.props = newProps
return newComponent
}锁定对象的方法
no new properties or methods can be added to the project 对象不可扩展, 即不可以新增属性或方法, 但可以修改/删除
same as prevent extension, plus prevents existing properties and methods from being deleted 在上面的基础上，对象属性不可删除, 但可以修改
same as seal, plus prevent existing properties and methods from being modified 在上面的基础上，对象所有属性只读, 不可修改
以上三个方法分别可用Object.isExtensible(), Object.isSealed(), Object.isFrozen()来检测
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。但是如果使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
具体使用办法举例：
<template>
<div>
<p>freeze后会改变吗
{{obj.foo}}
</p>
<!-- 两个都不能修改？？为什么？第二个理论上应该是可以修改的-->
<button @click="change">点我确认</button>
</div>
</template>
<script>
var obj = {
foo: '不会变'
}
Object.freeze(obj)
export default {
name: 'index',
data () {
return {
obj: obj
}
},
methods: {
change () {
this.obj.foo = '改变'
}
}
}
</script>运行后：
从报错可以看出只读属性foo不能进行修改，Object.freeze()冻结的是值，你仍然可以将变量的引用替换掉,将上述代码更改为：
<button @click="change">点我确认</button>
change () {
this.obj = {
foo: '会改变'
}
}Object.freeze()是ES5新增的特性，可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。防止对象被修改。 如果你有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升。
Object.freeze()是ES5新增的特性，可以冻结一个对象，防止对象被修改。
vue 1.0.18+对其提供了支持，对于data或vuex里使用freeze冻结了的对象，vue不会做getter和setter的转换。
如果你有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升。在我的实际开发中，这种提升大约有5~10倍，倍数随着数据量递增。
并且，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 }
]);
}
})vue的文档没有写上这个特性，但这是个非常实用的做法，对于纯展示的大数据，都可以使用Object.freeze提升性能。
以上是vue資料凍結有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
