VUE2響應(yīng)式原理使用Object.defineProperty缺點(diǎn)
引言
我們都知道vue2響應(yīng)式原理是通過(guò)Object.defineProperty來(lái)實(shí)現(xiàn)的，通過(guò)劫持各屬性的setter和getter，監(jiān)聽數(shù)據(jù)的變化。
Object.defineProperty 的缺點(diǎn)
無(wú)法監(jiān)聽對(duì)象屬性的新增和刪除
let num = 3
const cat = {
name: '大橘',
sex: 'boy',
age: 5
}
Object.defineProperty(cat,'age',{
get() {
console.log('get value')
return num
},
set(val) {
console.log('set value', val)
num = val
}
})
cat.age = 6 // 可以被監(jiān)聽到
cat.breed = '貍花貓' // 無(wú)法被監(jiān)聽到解決方式新增屬性
this.$set(this.obj, 'a', 'abc')
刪除屬性
this.$delete(this.obj, 'a')
無(wú)法監(jiān)聽數(shù)組下標(biāo)的變化，通過(guò)數(shù)組下標(biāo)修改元素，無(wú)法實(shí)時(shí)響應(yīng)。基于性能考慮vue2放棄了Object.defineProperty這一特性，如果數(shù)組長(zhǎng)度過(guò)大，比如1000條，性能代價(jià)和用戶體驗(yàn)收益不成正比 參考
push() pop() shift() unshift() splice() sort() reverse()
只能劫持對(duì)象的屬性，所以我們需要對(duì)每個(gè)對(duì)象的所有屬性進(jìn)行遍歷，然后需要深拷貝進(jìn)行修改
而Proxy可以監(jiān)聽對(duì)象而非屬性，相比前者具有更好的性能
以上就是VUE2響應(yīng)式原理使用Object.defineProperty缺點(diǎn)的詳細(xì)內(nèi)容，更多關(guān)于VUE2 Object.defineProperty缺點(diǎn)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本篇文章主要介紹了Vuex之理解Store的用法，Store類就是存儲(chǔ)數(shù)據(jù)和管理數(shù)據(jù)方法的倉(cāng)庫(kù)，實(shí)現(xiàn)方式是將數(shù)據(jù)和方法已對(duì)象形式傳入其實(shí)例中2017-04-04
關(guān)于vue中的時(shí)間格式轉(zhuǎn)化問(wèn)題
這篇文章主要介紹了關(guān)于vue中的時(shí)間格式轉(zhuǎn)化問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Element-UI介紹主題定制、自定義組件和插件擴(kuò)展的代碼示例
本文介紹了使用Element-UI實(shí)現(xiàn)主題定制、自定義組件和擴(kuò)展插件的方法和實(shí)用案例,在開發(fā)過(guò)程中,我們可以根據(jù)自己的需求,靈活選擇相關(guān)的技術(shù)手段,并不斷探索和嘗試,以提高開發(fā)效率和用戶體驗(yàn),感興趣的朋友跟隨小編一起看看吧2024-02-02
Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟
這篇文章主要介紹了Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要介紹了vue-cli工程webpack的基本用法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09
在許多Web應(yīng)用程序中，日歷是一個(gè)常見的組件，它通常用于顯示日期、安排會(huì)議、查看活動(dòng)等，在Vue中，我們可以使用第三方庫(kù)來(lái)輕松實(shí)現(xiàn)日歷功能，也可以手動(dòng)編寫代碼來(lái)實(shí)現(xiàn)日歷的展示和操作，本文將介紹如何使用vue-calendar和手動(dòng)編寫代碼來(lái)實(shí)現(xiàn)日歷功能2023-07-07
vue元素實(shí)現(xiàn)動(dòng)畫過(guò)渡效果
這篇文章主要介紹了vue元素實(shí)現(xiàn)動(dòng)畫過(guò)渡效果，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue.js實(shí)現(xiàn)價(jià)格格式化的方法
這里分享一個(gè)常用的價(jià)格格式化的一個(gè)方法，在電商的價(jià)格處理中非常的實(shí)用，具體實(shí)現(xiàn)代碼大家參考下本文2017-05-05
這篇文章主要為大家介紹了Vue前端路由hash與history差異的深入了解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue3原始值響應(yīng)方案及響應(yīng)丟失問(wèn)題解讀
這篇文章主要介紹了vue3原始值響應(yīng)方案及響應(yīng)丟失問(wèn)題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04