Proxy代理

Proxy用于创建一个对象的代理，从而实现基本操作的拦截和自定义

语法

const p = new Proxy(target, handler)

参数

target 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）

handler一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

基础示例

get

get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身(用到data时会触发)

let data = {
        id: 1,
        value:0,
    };
    // 将data转为Proxy实例
    data = new Proxy(data,{
        get(target,key){
            console.log('sda',key)
            return target[key];
        },
    })

    // 触发get
    console.log(data.value); //0

set

set方法用来拦截某个属性的赋值操作,可以接受4个参数，依次为目标对象，属性名，属性值，Proxy对象本身,最后一个参数可选

let data = {
        id: 1,
        value:0,
    };
    // 将data转为Proxy实例
    data = new Proxy(data,{
        get(target,key){
            console.log('sda',key)
            return target[key];
        },
        set(target, key, value){
            console.log(target,key,value)
            //设置只能修改ID，其他属性不能修改
            if(key == "id"){
                target[key] = value;
            }
            
        }
    })
	
	//触发set
	//修改id
    data.id = 3
    console.log(data.id) //3,修改成功
	
	//修改value
    data.value = 2
    console.log(data.value) //0,修改失败

Proxy与Object.defineProperty的对比

Object.defineProperty的缺陷

1. 只能追踪对象已有数据是否被修改，无法追踪新增属性和删除属性
2. 不能监听数组的变化（vue中是通过重写数组的部分方法来实现响应式）

Object.defineProperty的优势

1. 兼容性好，支持 IE9

Proxy的缺陷

1. Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平
2. 没有办法区分判断一个对象是一个Proxy的对象或者是target的对象平

Proxy的优势

1. Proxy 可以直接监听对象而非属性；
2. Proxy 可以直接监听数组的变化；
3. Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；