Vue3.0系列（响应式数据的本质：Proxy）

1.Vue3响应式数据本质

• 在Vue2.x中是通过defineProperty来实现响应式数据的

• Object.definePorperty()递归遍历所有对象的所有属性，当数据层级较深时，会造成性能影响。
• Object.definePorperty()只能作用在对象上，不能作用在数组上。
• Object.definePorperty()只能监听定义时的属性，不能监听新增属性。

• 在Vue3.x中是通过Proxy来实现响应式数据的

什么是proxy?

• Proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。
• 对目标对象的操作之前提供了拦截，可以对外界的操作进行过滤和改写，修改某些操作的默认行为，这样我们可以不直接操作对象本身，而是通过操作对象的代理对象来间接来操作对象

基本用法

let proxy = new Proxy(obj,handler)

参数：

作为构造函数，Proxy接受两个参数。
第一个参数是所要代理的目标对象；
第二个参数是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作

Proxy 支持的拦截操作有13种：

（1）get(target, propKey, receiver)
拦截对象属性的读取，比如proxy.foo和proxy['foo']。
最后一个参数receiver是一个对象，可选，参见下面Reflect.get的部分。

（2）set(target, propKey, value, receiver)
拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。
更多拦截操作参见[ES6的Proxy](http://jsrun.net/t/mZKKp)

例

let obj = {
    name:{name:'zs'},
    arr: [1,2,3]
}

let handler = {
//target是obj , key就是要取obj里面的哪个属性
    get (target,key) { 
        console.log('收集依赖')
        return target[key]
    },
 //target是obj , key就是要修改哪个属性,value是设置的新值
    set (target,key,value) {
        console.log('更新UI界面')
        target[key] = value；
        return true;
    }
}

let proxy = new Proxy(obj,handler)

//通过代理后的对象取值和设置值
proxy.arr
proxy.name = '123'