Vue 3.0 中使用了 Proxy 對(duì)象代理進(jìn)行攔截實(shí)現(xiàn)了數(shù)據(jù)綁定視圖的驅(qū)動(dòng)操作。彌補(bǔ)了vue2.0中的局限，比如屬性刪除增加監(jiān)聽(tīng)、對(duì)數(shù)組基于下標(biāo)的修改、長(zhǎng)度變化等等。

參考一下網(wǎng)上流傳的機(jī)制圖

Proxy 是什么？

---

首先我們來(lái)了解一下Proxy是什么。Proxy不是簡(jiǎn)單的serverProxy服務(wù)器代理，而生ES6中新特性Proxy，我們先看一下MDN官網(wǎng)的說(shuō)明

Proxy 對(duì)象用于創(chuàng)建一個(gè)對(duì)象的代理，從而實(shí)現(xiàn)基本操作的攔截和自定義（如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）。

術(shù)語(yǔ)

handler
包含捕捉器（trap）的占位符對(duì)象，可譯為處理器對(duì)象。
traps
提供屬性訪問(wèn)的方法。這類似于操作系統(tǒng)中捕獲器的概念。
target
被 Proxy 代理虛擬化的對(duì)象。它常被作為代理的存儲(chǔ)后端。根據(jù)目標(biāo)驗(yàn)證關(guān)于對(duì)象不可擴(kuò)展性或不可配置屬性的不變量（保持不變的語(yǔ)義）。

語(yǔ)法

const p = new Proxy(target, handler)

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

---

通過(guò)官網(wǎng)的說(shuō)明我們知道，Proxy是可以對(duì)對(duì)象的各種操作攔截，下面我們通過(guò)代理來(lái)演示一下。

const target = { list: [] } const handle = {/**/* 監(jiān)聽(tīng)設(shè)置方法/* @params target 對(duì)象目標(biāo)/* @params prop 對(duì)象鍵/* @params value 設(shè)置的值**/set(target, prop, value) {// 如果設(shè)置的是list，增加元素if (prop === 'list') {target[prop].push(value)console.log('可自定義觸發(fā)diff策略驅(qū)動(dòng)視圖')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']

由以上代碼可以看到我們自定義攔截了對(duì)象的設(shè)置操作，那么我在自定義一個(gè)視圖驅(qū)動(dòng)引擎和map緩沖操作等即可對(duì)數(shù)據(jù)進(jìn)行雙向綁定性能優(yōu)化等操作。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。