这篇文章主要介绍了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代理怎么应用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。