详解VUE中的Proxy代理
短信预约 -IT技能 免费直播动态提醒
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) // falseget、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'))vue3中就是用Proxy实现的双向数据绑定
到此这篇关于Proxy代理对象详解的文章就介绍到这了,更多相关Proxy代理内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
