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