VUE2響應(yīng)式原理使用Object.defineProperty缺點(diǎn)
引言
我們都知道vue2響應(yīng)式原理是通過Object.defineProperty來實(shí)現(xiàn)的，通過劫持各屬性的setter和getter，監(jiān)聽數(shù)據(jù)的變化。
Object.defineProperty 的缺點(diǎn)
無法監(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 = '貍花貓' // 無法被監(jiān)聽到解決方式新增屬性
this.$set(this.obj, 'a', 'abc')
刪除屬性
this.$delete(this.obj, 'a')
無法監(jiān)聽數(shù)組下標(biāo)的變化，通過數(shù)組下標(biāo)修改元素，無法實(shí)時(shí)響應(yīng)?；谛阅芸紤]vue2放棄了Object.defineProperty這一特性，如果數(shù)組長(zhǎng)度過大，比如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)文章
vue自動(dòng)化路由的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自動(dòng)化路由的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
不同于vue2不需要被use使用,vue3的機(jī)制是你的指令必須要被注冊(cè)成方法的,這樣你才能全局使用到自定義指令,下面這篇文章主要給大家介紹了關(guān)于vue3自定義指令的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家介紹了使用v-memo緩存模板子樹提高應(yīng)用性能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue實(shí)現(xiàn)富文本編輯器詳細(xì)過程
Vue富文本的實(shí)現(xiàn)可以使用一些現(xiàn)成的第三方庫(kù),如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)富文本編輯器的相關(guān)資料,需要的朋友可以參考下2024-01-01
在使用token進(jìn)行登錄的過程中,如果token過期了,需要重新輸入用戶名和密碼登錄,這種體驗(yàn)肯定是不好的,下面這篇文章主要給大家介紹了關(guān)于Vue?Token過期問題的2種解決方案,需要的朋友可以參考下2023-02-02
vue中手機(jī)號(hào),郵箱正則驗(yàn)證以及60s發(fā)送驗(yàn)證碼的實(shí)例
下面小編就為大家分享一篇vue中手機(jī)號(hào),郵箱正則驗(yàn)證以及60s發(fā)送驗(yàn)證碼的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
關(guān)于vue3.0使用axios報(bào)錯(cuò)問題
這篇文章主要介紹了vue3.0使用axios報(bào)錯(cuò)問題記錄,vue-cli3.0安裝插件的時(shí)候要注意區(qū)分vue-cli2.0的命令，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
Vue重要修飾符.sync對(duì)比v-model的區(qū)別及使用詳解
這篇文章主要為大家介紹了Vue中重要修飾符.sync與v-model的區(qū)別對(duì)比及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
關(guān)于antd-vue?a-menu菜單綁定路由的相關(guān)問題
這篇文章主要介紹了關(guān)于antd-vue?a-menu菜單綁定路由的相關(guān)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue路由權(quán)限和按鈕權(quán)限的實(shí)現(xiàn)示例
本文主要介紹了vue路由權(quán)限和按鈕權(quán)限的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04