vue3的响应式

一 proxy

1. 什么是proxy

proxy是es6的新特性，主要是通过handler对象中的拦截方法拦截目标对象target的某些行为(属性查找，赋值，枚举，函数调用等)

const proxy = new Proxy(target, handler)
/* target: 使用Proxy包装的目标对象(可以是任何类型的对象，如原生数组，函数，另外一个代理) */
/* handler: 通常以函数作为属性的对象，定义了在执行各种操作时代理proxy的行为 */ 

2. 为什么改用proxy

vue2使用object.defineProperty()来实现响应式，会有它的局限性，比如无法监听对属性的添加删除操作，无法监听数组基于下标的修改操作，不支持Map，Set，WeakMap，WeakSet等缺陷，改用proxy来实现响应式可以解决这些问题，并且更好的支持了typescript，但同时也意味着vue3将放弃对低版本浏览器的兼容(兼容版本ie11以上)

3. 几个proxy中hander对象的捕获器

1. handler.has(target, propKey)：target是目标对象，propKey为拦截属性名，其作用是拦截判断target对象是否含有属性propKey的操作，对应Reflect.has(target, propKey)

const handler = {
    has(target, propKey){
        /* 操作 */
        return propKey in target
    }
}
const proxy = new Proxy(target, handler)

2. handler.get(target, propKey, receiver)：target是目标对象，propKey为拦截属性名，receiver是proxy实例，返回读取的属性，作用是拦截对象属性的读取，对应Reflect.get(target, propertyKey, receiver)

const handler = {
    get: function(obj, prop) {
        return prop in obj ? obj[prop] : '没有此属性'
    }
}

const obj = new Proxy({}, handler)

obj.propA = 'A'
obj.propB = 'B'

console.log(obj.propA, obj.propB)   /* A B */
console.log(obj,propC)              /* 没有此属性 */

3. handler.set(target, propKey, value, receiver)：target是目标对象，propKey为拦截属性名，value是新设置的属性值，receiver:是proxy实例，返回true表示操作成功，否则操作失败，作用是拦截对象的属性赋值