Object.freeze() 方法小记

在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();

冻结对象为浅冻结
上一篇:ES6 const 介绍


下一篇:使用vue-cropper裁剪正方形上传头像