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 缓冲操作等即可对数据进行双向绑定性能优化等操作。