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