1. 程式人生 > 其它 >在Vue中使用Object.freeze

在Vue中使用Object.freeze

在vue2.0中,當你把一個普通的 JavaScript 物件傳給 Vue 例項的 data 選項,Vue 將遍歷此物件所有的屬性,並使用 Object.defineProperty 把這些屬性全部轉為 getter/setter,這些 getter/setter 對使用者來說是不可見的,但是在內部它們讓 Vue 追蹤依賴,在屬性被訪問和修改時通知變化

有時在實際應用中,我們只是用來儲存某個物件或者陣列,並不要求它響應對應的檢視,但在這個過程中vue還是會用object.defineProperty來監聽這個陣列,這樣就是一種效能浪費,所以我們闊以使用Object.freeze來凍結資料

{{ item.text }}

data() { let data = Object.freeze([{text:'羊先生'},{text:'ipbic'}]) return { msg: '', items:data } }, mounted() {
this.items[0].text = '分享快樂'; // 介面不會更新

this.items = [{ text: 'itnavs' },{ text: '分享快樂' }]; // 介面會更新

this.items = Object.freeze([{ text: 'itnavs' },{ text: '分享快樂' }]); // 介面會更新

},
如果你有一個巨大的陣列或Object,並且確信資料不會修改,使用Object.freeze()可以讓效能大幅提升。在我的實際開發中,這種提升大約有5~10倍,倍數隨著資料量遞增

使用Object.freeze從而避免這種資源的浪費