>[danger]Vue：雙向數據綁定 >[info]建議回答 雙向數據綁定就是：**數據劫持 + 發布訂閱模式（觀察者模式）**。 Vue2中在實例初始化時遍歷 data 中的所有屬性，并使用 **Object.defineProperty**把這些屬性全部轉為 getter/setter。并 劫持各個屬性 getter 和 setter，在數據變化時發布消息給訂閱者，觸發相應的監聽回調，而這之間存在幾個問題 * 初始化時需要遍歷對象所有 key，如果對象層次較深，性能不好 * 通知更新過程需要維護大量 dep 實例和 watcher 實例，額外占用內存較多 * Object.defineProperty 無法監聽到數組元素的變化，只能通過劫持重寫數方法 * 動態新增，刪除對象屬性無法攔截，只能用特定 set/delete API 代替 * 不支持 Map、Set 等數據結構 **Vue3中使用 Proxy 來監控數據的變化**。Proxy 是 ES6 中提供的功能，其作用為：用于定義基本操作的自定義行為（如屬性查找，賦值，枚舉，函數調用等）。 相對于`Object.defineProperty()`，有以下特點： 1. **Proxy 直接代理整個對象而非對象屬性**，這樣只需做一層代理就可以監聽同級結構下的所有屬性變化，包括新增屬性和刪除屬性。 2. 它的處理方式是在 getter 中去遞歸響應式，這樣的好處是真正訪問到的內部屬性才會變成響應式，簡單的可以說是按需實現響應式，減少性能消耗。 3. Proxy 可以監聽數組的變化。 >[info]技術詳解 在 JavaScript 中，defineProperty 和 Proxy 都是對象的屬性訪問控制方法，它們有著一些明顯的區別。 defineProperty 是一個 ES5 引入的 API，用于在已有對象上定義新屬性或者修改現有屬性，并且可以精細地控制這個屬性的 getter、setter、可枚舉性、可配置性和可寫性等特性。通過 defineProperty，我們可以對一個對象的屬性進行實時監測，從而實現數據綁定和響應式編程等高級功能。 但是，defineProperty 也存在一些限制。它只能監聽對象的已有屬性，而不能監聽整個對象的變化。同時，由于該 API 的使用方式比較繁瑣，使得其難以擴展和封裝。 相比之下，Proxy 是 ES6 中引入的一個新特性，可以代理 JavaScript 對象的訪問，提供了更加靈活的屬性訪問控制方式。通過在目標對象外層建立一個代理層，Proxy 可以攔截對象的訪問、修改、刪除、枚舉等操作，從而實現更加細粒度的控制。 與 defineProperty 不同的是，Proxy 可以監聽整個對象的變化，而不僅僅是某個屬性的變化。另外，Proxy 的使用方式相對簡單，可以輕松地被擴展和封裝，使得其更加適用于面向對象編程和函數式編程等多種編程范式。 總的來說，defineProperty 和 Proxy 都是非常有價值的對象屬性訪問控制方法。如果需要對對象的某個屬性進行深度監測，或者需要更加靈活的屬性訪問控制方式，那么建議使用 Proxy；如果只需要對對象的某個屬性進行簡單的監聽，那么可以選擇使用 defineProperty。 >參考鏈接 [百度腦圖](https://naotu.baidu.com/file/3797643ea48cde0fd8babb5009e71511)