温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

VUE中的Proxy代理怎么应用

发布时间:2023-04-18 15:43:27 来源:亿速云 阅读:136 作者:iii 栏目:开发技术

这篇文章主要介绍了VUE中的Proxy代理怎么应用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇VUE中的Proxy代理怎么应用文章都会有所收获,下面我们一起来看看吧。

Proxy 是ES6中提供的一个非常强大的功能,可以用来代理另一个对象,从而拦截、监视并修改这个对象的各种操作

首先是Proxy()的参数:

  • arget:被代理的对象。

  • handler:被代理对象上的自定义行为,也就是对arget进行处理的地方

handler处理函数一都有:

  • get(target, propKey, receiver):拦截对象属性的读取操作。

  • set(target, propKey, value, receiver):拦截对象属性的设置操作,返回一个布尔值

  • has(target, propKey):拦截 propKey in proxy 操作,返回一个布尔值

  • deleteProperty(target, propKey):拦截对象属性的删除操作,返回一个布尔值

  • apply(target, object, args):拦截 Proxy 实例作为函数调用的操作。

  • construct(target, args, newTarget):拦截 Proxy 实例作为构造函数调用的操作,返回一个对象

  • ......

下面对get函数进行简单的演示:

let arr = [123,"ac","你好"]
arrPro = new Proxy(arr,{
    get(target,prop){
        // target 代表被代理的数组,也就是 [123,"ac","你好"]
        console.log(target)
        // prop 表示要访问的属性,也就是 0
        console.log(prop)
        return prop in target ? target[prop] : 'error'
    }
})
console.log(arrPro[0])

下面对set函数进行简单的演示:

let arr = []
let arrPro = new Proxy(arr,{
    set(target,prop,val){
        if(typeof val === "number"){
            target[prop] = val
            return true
        }else{
            return false
        }
    }
}) 
arrPro.push(5) 
console.log(arr)  //[5]

下面对has函数进行简单的演示:

let range = {
    start:1,
    end:5
}
range = new Proxy(range,{
    has(target,prop){
       return prop >= target.start && prop <= target.end
    }
})
console.log(2 in range) // true
console.log(6 in range) // false

get、set、deleteProperty小集合:

let user = {
    name: 'ac',
    age: 12,
    _password: 'xxx'
}
 
user = new Proxy(user, {
    get(target, prop) {
        if (prop.startsWith('_')) {
            throw new Error('不可访问')
        } else {
            return target[prop]
        }
    },
    set(target, prop, val) {
        if (prop.startsWith('_')) {
            throw new Error('不可设置')
        } else {
            target[prop] = val
            return true
        }
    },
    deleteProperty(target, prop) {
        if (prop.startsWith('_')) {
            throw new Error('不可删除')
        } else {
            delete target[prop]
            return true
        }
    }
})
console.log(user.age)  //12
console.log(user._password)  //Error:不可访问
 
user.age = 22
console.log(user.age)  //22
 
delete user.age
console.log(user.age)  //undefined

下面对apply函数进行简单的演示:

let sum = (...args) =>{
    let num = 0
    args.forEach(item =>{
        num += item
    })
    return num
}
 
sum = new Proxy(sum,{
    apply(target,ctx,args){
        return target(...args) * 2
    }
})
console.log(sum(2,5)) //14
console.log(sum.call(null,2,5)) //14
console.log(sum.apply(null,[2,5]))  //14

下面对construct函数进行简单的演示:

let User = class {
    constructor(name){
        this.name = name
    }
}
User = new Proxy(User,{
    construct(target,args,newTarget){
        console.log("代理拦截")  //代理拦截
        return new target(...args)  //User {name: 'ac'}
    }
})
 
console.log(new User('ac'))

关于“VUE中的Proxy代理怎么应用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“VUE中的Proxy代理怎么应用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI