Object.freeze的使用和详解

首先我们看看MDN老大的描述:

也就是说被冻结的对象的属性不能对他进行任何增删改操作,包括原型上的属性,这样我们可以使用在只用于展示的数据上,冻结后vue就不会给他添加响应式getter和setter了,减少了vue对对象的绑定,提高了性能,冻结后的对象属性改了他视图也不会发生响应

这个冻结可以理解为使用了Object.defineProperty设置了对象属性的可读写限制后的效果

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 }
             ]);
    }
})

但是要注意的是:可以修改对象的栈引用,就是直接给这个对象赋值一个新对象,那么视图会发生响应