您现在的位置是：首页 > 文章详情

Object.freeze() 方法小记

日期：2019-07-29点击：484收藏

在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>

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(); 冻结对象为浅冻结

原文链接：https://yq.aliyun.com/articles/711670

关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。