vue学习-- Object.freeze() 优化速度

一般我们在需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

freeze翻译成汉语有冻结的意思使用 ,Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。 

在data或vuex里我们可以使用freeze冻结对象

 

那么他存在的意义(应用场景)是什么呢？

如果你有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升。在我的实际开发中，这种提升大约有5~10倍，倍数随着数据量递增,

对于纯展示的大数据，都可以使用Object.freeze提升性能。

 

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