proxy的应用场景

欢迎大家访问我的博客dreamITGirl，不要吝啬你们的小星星，点个star～ 有问题的话，你可以将问题在 GitHub问我.

写在前面
随着Vue3越来越被大家学习，关于Proxy的使用也是不断收到关注。Proxy和Object.defineProperty的对比也备受关注。这篇文章适合有vue开发经验的同学阅读。

回顾Object.defineProperty

在vue2.x版本中，是通过Object.defineProperty进行双向数据绑定的，接下来看一下Object.defineProperty是如何进行双向绑定的。接下来简单实现一下。

function observe(obj) {
    if (typeof obj === 'object' ) {
        for (const key in obj) {
            defineReactive(obj,key,obj[key])
        }
    }
}
function defineReactive(obj,key,value) { 
    // 针对value是对象，进行递归
    observe(value)
    Object.defineProperty(obj,key,{
        get:function () {
            console.log(`获取${key}:value是${value}`)
            return value
        },
        set:function (v) {
            observe(v)
            console.log(`${key}数据改变了`)
            value = v
        }
    })
}
 
let obj = {  
    name: '守候',  
    flag: {  
        book: {  
            name: 'js',  
            page: 325  
        },  
        interest: ['火锅', '旅游'],  
    }  
}
observe(obj)

问题一：Object.defineProperty无法监听增加或删除的属性

我们知道Object.defineProperty无法监听增加或者删除的属性，
在我们使用vue2.x中，增加属性我们一般会通过$set的方法进行操作，$set内部也是通过使用Object.defineProperty实现的

问题二：Object.defineProperty无法监听到数组的变化

从上面的图片中我们可以看到修改数组中的值是可以的，但是不能被监听到，输出的interest数组还是改之前的数组

问题三：如果对象的层级很多的情况下，不断的递归，会导致时间过长，影响性能

回顾Proxy

vue3的版本中，采用了Proxy的方式。MDN 中的定义如下：

对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）

简单来说就是，对目标对象设置一层拦截，任何对这个对象的操作都会经常这层拦截。这就相当于Axios的拦截器。

接下来写个案例，理解一下Proxy

function observerProxy(obj) {  
    let handler = {  
        get(target, key, receiver) {  
            console.log('获取：' + key) // 如果是对象，就递归添加 proxy 拦截  
            if (typeof target[key] === 'object' && target[key] !== null) {  
                return new Proxy(target[key], handler)  
            }  
            return Reflect.get(target, key, receiver)  
        },  
        set(target, key, value, receiver) {  
            console.log(key + "-数据改变了") 
            return Reflect.set(target, key, value, receiver)  
        }  
    }  
    return new Proxy(obj, handler)  
}  
let obj = {  
    name: '守候',  
    flag: {  
        book: {  
            name: 'js',  
            page: 325  
        },  
        interest: ['火锅', '旅游'],  
    }  
}  
let objTest = observerProxy(obj)  

操作数组的时候也会监听到

操作对象属性中是对象的时候也会监听到

比较两者的区别

通过上面的代码，我们不难看出来它们的区别，proxy还是很强大的，有11种方法。能够处理Object.defineProperty这个方法中无法处理的。

Proxy的处理场景

负索引数组

在使用splice(-1) 和 slice(-1)等API的时候，当输入的是负数时，会自动定位到数组的尾部最后一项，但是在普通的数组中，负数是不能用的。

let arr = [1,2,3]
console.log(arr.splice(-1)) // [3]
console.log(arr[-1]) // undefined

这种情况下我们可以通过创建一个proxy对象，进行控制返回值

function arrProxy(params) {
    let handler = {
        get(target,key){
            if (target instanceof Array && target.length > 0) {
                if (key > 0) {
                    return target[key]
                } else {
                    let len = target.length 
                    if (key * -1 > len) {
                        return new Error('该下标不存在')
                    }
                    let index = len + Number(key) // key是字符串
                    return target[index]
                }
            } else if (typeof target === 'object' && target !== null) {
                console.log('这是一个对象')
                return target[key]
            }
        }
    }
    return new Proxy(params,handler)
}
let arr = [1,2,3,4,5,6]
let testArr = arrProxy(arr)
console.log(testArr[-1]) // 6

表单校验

在对于表单的验证上，当用户修改表单中的数据时，可通过proxy进行设置拦截。
举个例子：

function validFrom(formObj) {
    let handler = {
        set(target,key,value){
            if (key === 'age') {
                console.log('here',value > 10 && value < 40,typeof value == 'number' )
 
                if (typeof value == 'number' && (value > 10 && value < 40)) {
                    target[key] = value
                } else {
                    console.log('出现错误')
                    throw new Error('请输入准确的值')
                }
            }
        }
    }
    return new Proxy(formObj,handler)
}
 
let form = {
    name:'Alice',
    age:20
}
let testForm = validFrom(form)
testArr.age = 60 // '请输入准确的值'

根据用户输入值，解析存储

比如有一个需求，根据用户输入的值，将其解析分成对应属性的值。这样的话可以使用proxy。我看到网站上有其他博客写的一个案例，案例的需求是这样的，根据用户输入的身份证号码，将其所在省份、出生日期分别写在表单中的对应表格中。
文章链接

数据格式化

数据格式化，相对来说好理解一些。当后台返回接口数据不是我们想要的格式时，我们可以通过修改设置成我们想要的格式。这里就不再举例了赘述了。