关于Vue 3.0 的改进 Proxy 代理实现数据驱动视图

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