vue3.0 proxy

vue3 中的 proxyAPI

Proxy的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作。

Proxy 对象用于定义基本操作的自定义行为(如属性查找，赋值，枚举，函数调用等)
可以理解为在对象之前设置一个”拦截“，当监听的对象被访问的时候，都必须经过这层拦截。可以在这拦截中对原对象处理，返回需要的数据格式,也就是无论访问对象的什么属性，之前定义的或是新增的属性，都会走到拦截中进行处理。

• new Proxy(target, handler)

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

handler：    一个对象，其属性是当执行一个操作时定义代理的行为的函数。

             handler    本身就是ES6所新设计的一个对象.它的作用就是用来自定义代理对象的各种可代理操作。
                        它本身一共有13中方法,每种方法都可以代理一种操作，常用的几种方法如下:

                         // 在定义代理对象某个属性时的属性描述时触发该操作
                         // 比如在执行 Object.defineProperty(proxy, "foo", {}) 时。
                         handler.defineProperty()

                         // 在判断代理对象是否拥有某个属性时触发该操作，比如在执行 "foo" in proxy 时。
                         handler.has()

                         // 在读取代理对象的某个属性时触发该操作，比如在执行 proxy.foo 时。
                          handler.get()

                          // 在给代理对象的某个属性赋值时触发该操作，比如在执行 proxy.foo = 1 时。
                          handler.set()

                         // 在删除代理对象的某个属性时触发该操作，比如在执行 delete proxy.foo 时。
                          handler.deleteProperty()

                          // 在获取代理对象的所有属性键时触发该操作
                          // 比如在执行 Object.getOwnPropertyNames(proxy) 时。
                          handler.ownKeys()

                          // 在调用一个目标对象为函数的代理对象时触发该操作，比如在执行 proxy() 时。
                          handler.apply()

                          // 在给一个目标对象为构造函数的代理对象构造实例时触发该操作
                          // 比如在执行new proxy() 时。
                          handler.construct()

• Reflect

Reflect是内置对象，为操作对象而提供的新API,将Object对象的属于语言内部的方法放到Reflect对象上,即从Reflect对象上拿Object对象内部方法。 如果出错将返回false

Reflect.set

Reflect.set方法设置target对象的name属性等于value。如果name属性设置了赋值函数，则赋值函数的this绑定receiver。

Reflect.get

Reflect.get方法查找并返回target对象的name属性，如果没有该属性，则返回undefined。

• proxy 监听简单的对象

let obj = {

    name:'zhu'
}

let handler = {

    get(obj,key){

        console.log('读取')

        return Reflect.get(obj,key)

    },

    set(obj,key,value){

        console.log('更新视图')
        Reflect.set(obj,key,value)

    }
}

let proxy = new Proxy(obj,handler)

proxy.name='li' // 通过代理，调用set方法修改name值
console.log(proxy.name) // get方法读取

• proxy 监听复杂的对象

let obj = {
    name:'zhu',
    info: {
          address: '北京'  
    },
    arr: [1,2,3]
}

let handler = {

    get(obj,key){

        //递归
        if(typeof obj[key] === 'object' && typeof obj[key] !== null) 
                return new Proxy(obj[key],handler)

        console.log('读取')
        return Reflect.get(obj,key)
    },

    set(obj,key,value){

        console.log('更新')

        Reflect.set(obj,key,value)

    }
}


let proxy = new Proxy(obj,handler)

proxy.info.address='上海' // 通过代理，调用get读取info，然后调用set方法修改address值

• proxy 监听数组

proxy.arr.push(4)
// 调用两次set，
// 第一次修改数组的长度
// 第二次把元素放进数组里

// 代码同上
set (obj,key,value) {
        let oldValue = obj[key]
        console.log(key, oldValue, value)
        // 数组不存在这个属性，直接新增
        if(!oldValue){
            console.log('新增属性')
        }else if(oldValue !== value){
        // 数组存在这个属性，修改属性
            console.log('修改属性')
        }
        return Reflect.set(target,key,value)
    }