您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue數(shù)據(jù)監(jiān)聽(tīng)分析Object.defineProperty與Proxy的區(qū)別”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“vue數(shù)據(jù)監(jiān)聽(tīng)分析Object.defineProperty與Proxy的區(qū)別”文章能幫助大家解決問(wèn)題。
其實(shí)在 api
的命名上就能看出端倪,Object.defineProperty
顧名思義,是與對(duì)象和屬性有關(guān)的。 vue2
就是利用 defineProperty
的 set
和 get
方法去監(jiān)聽(tīng)對(duì)象屬性變化的。 而 Proxy
是直接去監(jiān)聽(tīng)一個(gè)對(duì)象的。
注意:他們?cè)谶@里的區(qū)別就是 Object.defineProperty
監(jiān)聽(tīng)的是對(duì)象的屬性,而 Proxy
監(jiān)聽(tīng)的是這個(gè)對(duì)象本身
如上所述,Object.defineProperty
監(jiān)聽(tīng)的是對(duì)象的屬性, 但是監(jiān)聽(tīng)屬性只能遍歷監(jiān)聽(tīng)對(duì)象已有的屬性,對(duì)于可能新增的屬性,vue2
是沒(méi)有辦法監(jiān)聽(tīng)的,頁(yè)面自然也就不會(huì)更新。 所以為了解決這個(gè)問(wèn)題 vue2
提供了 set
方法,當(dāng)新增屬性時(shí),可以通過(guò) set
方法為新增的屬性添加監(jiān)聽(tīng)器。
而 Proxy
帶來(lái)的問(wèn)題就是由于監(jiān)聽(tīng)的是一個(gè)對(duì)象,自然能監(jiān)聽(tīng)對(duì)象的所有屬性變化,那么也就不再需要 set
這個(gè)方法了。
但是由于監(jiān)聽(tīng)的是對(duì)象,所以沒(méi)法處理基礎(chǔ)類型。當(dāng)我們使用 ref(false)
去創(chuàng)建一個(gè)基本類型的響應(yīng)式變量時(shí),本質(zhì)相當(dāng)于 reactive({value: false})
。于是 Vue3
有了一個(gè)很奇怪的現(xiàn)象, 明明想用 ref
方法監(jiān)聽(tīng)一個(gè)基礎(chǔ)類型,卻需要通過(guò) .value
才能獲取到具體值。
關(guān)于“vue數(shù)據(jù)監(jiān)聽(tīng)分析Object.defineProperty與Proxy的區(qū)別”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。