vue數(shù)據(jù)監(jiān)聽解析Object.defineProperty與Proxy區(qū)別

更新時間：2023年03月13日 09:13:54 作者：可畏

這篇文章主要為大家介紹了vue數(shù)據(jù)監(jiān)聽解析Object.defineProperty Proxy源碼示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

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

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

其實在 api 的命名上就能看出端倪，Object.defineProperty 顧名思義，是與對象和屬性有關的。 vue2 就是利用 defineProperty 的 set 和 get 方法去監(jiān)聽對象屬性變化的。而 Proxy 是直接去監(jiān)聽一個對象的。

注意：他們在這里的區(qū)別就是 Object.defineProperty 監(jiān)聽的是對象的屬性，而 Proxy 監(jiān)聽的是這個對象本身

在使用上的差異

如上所述，Object.defineProperty 監(jiān)聽的是對象的屬性，但是監(jiān)聽屬性只能遍歷監(jiān)聽對象已有的屬性，對于可能新增的屬性，vue2 是沒有辦法監(jiān)聽的，頁面自然也就不會更新。所以為了解決這個問題 vue2 提供了 set 方法，當新增屬性時，可以通過 set 方法為新增的屬性添加監(jiān)聽器。
而 Proxy 帶來的問題就是由于監(jiān)聽的是一個對象，自然能監(jiān)聽對象的所有屬性變化，那么也就不再需要 set 這個方法了。

但是由于監(jiān)聽的是對象，所以沒法處理基礎類型。當我們使用 ref(false) 去創(chuàng)建一個基本類型的響應式變量時，本質相當于 reactive({value: false})。于是 Vue3 有了一個很奇怪的現(xiàn)象, 明明想用 ref 方法監(jiān)聽一個基礎類型，卻需要通過 .value 才能獲取到具體值。