前言

總能深深感覺(jué)到自己能力有限，寫(xiě)這篇文章的目的純粹是因?yàn)榘l(fā)現(xiàn)在實(shí)際工作中，和一些小伙伴交流時(shí)發(fā)現(xiàn)，雖然有些小伙伴大概知道 vue2 與 vue3 的區(qū)別，但并沒(méi)有去進(jìn)一步思考一些深一點(diǎn)的東西。盡管能力有限，但想著自己在起步時(shí)候的艱難，就想著分享一下自己的一些看法，雖然不一定有多深入，但能引起大家的一些思考也是好的。

Object.defineProperty 與 Proxy 的區(qū)別

其實(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ǔ)類(lèi)型。當(dāng)我們使用 ref(false) 去創(chuàng)建一個(gè)基本類(lèi)型的響應(yīng)式變量時(shí)，本質(zhì)相當(dāng)于 reactive({value: false})。于是 Vue3 有了一個(gè)很奇怪的現(xiàn)象, 明明想用 ref 方法監(jiān)聽(tīng)一個(gè)基礎(chǔ)類(lèi)型，卻需要通過(guò) .value 才能獲取到具體值。

總結(jié)與思考

總的來(lái)說(shuō)，Proxy 雖然解決了 set 的坑，但是又埋下了 ref 的坑，那么 Proxy 值得使用嗎？

我的理解是值得的。原因就是同樣監(jiān)聽(tīng)一個(gè)對(duì)象，之前要為每個(gè)屬性設(shè)置監(jiān)聽(tīng)器，現(xiàn)在不需要了，性能和屬性管理成本都能直線下降。

以上就是 vue數(shù)據(jù)監(jiān)聽(tīng)解析Object.defineProperty與Proxy區(qū)別的詳細(xì)內(nèi)容，更多關(guān)于 vue數(shù)據(jù)監(jiān)聽(tīng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論