Vue 3.0 中使用了 Proxy 對象代理進行攔截實現了數據綁定視圖的驅動操作。彌補了vue2.0中的局限，比如屬性刪除增加監聽、對數組基于下標的修改、長度變化等等。

參考一下網上流傳的機制圖

Proxy 是什么？

---

首先我們來了解一下Proxy是什么。Proxy不是簡單的serverProxy服務器代理，而生ES6中新特性Proxy，我們先看一下MDN官網的說明

Proxy 對象用于創建一個對象的代理，從而實現基本操作的攔截和自定義（如屬性查找、賦值、枚舉、函數調用等）。

術語

handler
包含捕捉器（trap）的占位符對象，可譯為處理器對象。
traps
提供屬性訪問的方法。這類似于操作系統中捕獲器的概念。
target
被 Proxy 代理虛擬化的對象。它常被作為代理的存儲后端。根據目標驗證關于對象不可擴展性或不可配置屬性的不變量（保持不變的語義）。

語法

const p = new Proxy(target, handler)

• 參數
  target
  要使用 Proxy 包裝的目標對象（可以是任何類型的對象，包括原生數組，函數，甚至另一個代理）。
  handler
  一個通常以函數作為屬性的對象，各屬性中的函數分別定義了在執行各種操作時代理 p 的行為。
  參考網址 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy#%E8%AF%AD%E6%B3%95

---

通過官網的說明我們知道，Proxy是可以對對象的各種操作攔截，下面我們通過代理來演示一下。

const target = { list: [] } const handle = {/**/* 監聽設置方法/* @params target 對象目標/* @params prop 對象鍵/* @params value 設置的值**/set(target, prop, value) {// 如果設置的是list，增加元素if (prop === 'list') {target[prop].push(value)console.log('可自定義觸發diff策略驅動視圖')return true}// 增加屬性值target[prop] = value} } const observedData = new Proxy(target, handle) observedData.list = '123' observedData.list = '456' observedData.list = '789' console.log(observedData.list) // ['123', '456', '789']

由以上代碼可以看到我們自定義攔截了對象的設置操作，那么我在自定義一個視圖驅動引擎和map緩沖操作等即可對數據進行雙向綁定性能優化等操作。

總結

以上是生活随笔為你收集整理的关于Vue 3.0 的改进 Proxy 代理实现数据驱动视图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。