江苏龙网

  1. 首页 > 人文 > >

笑看尘世|学习Vue3.0,先来了解一下Proxy( 四 )

set当为对象里面的属性赋值的时候 ， 会触发set
当给对象里面的属性赋值的时候 ， 会触发set,set函数的结构如下
【笑看尘世|学习Vue3.0,先来了解一下Proxy】/** * target: 目标对象 ， 即通过proxy代理的对象 * key: 要赋值的属性名称 * value: 目标属性要赋的新值 * receiver: 与 get的receiver 基本一致 */handle.set(target,key,value, receiver)示例某系统需要录入一系列数值用于数据统计 ， 但是在录入数值的时候 ， 可能录入的存在一部分异常值 ， 对于这些异常值需要在录入的时候进行处理, 比如大于100的值 ， 转换为100, 小于0的值 ， 转换为0, 这时候就可以使用proxy的set ， 在赋值的时候 ， 对数据进行处理
const numbers = []const proxy = new Proxy(numbers, {set(target,key,value) {if(value < 0) {value = http://kandian.youth.cn/index/0}else if(value> 100) {value = http://kandian.youth.cn/index/100}target[key] = value// 对于set 来说 ， 如果操作成功必须返回true, 否则会被视为失败return true}})proxy.push(1)proxy.push(101)proxy.push(-10)// 输出 [1, 100, 0]console.log(numbers)对比Vue2.0在使用Vue2.0的时候 ， 如果给对象添加新属性的时候 ， 往往需要调用$set, 这是因为Object.defineProperty只能监听已存在的属性 ， 而新增的属性无法监听 ， 而通过$set相当于手动给对象新增了属性 ， 然后再触发数据响应 。 但是对于Vue3.0来说 ， 因为使用了Proxy ，在他的set钩子函数中是可以监听到新增属性的 ， 所以就不再需要使用$set
const obj = {name: '子君'}const proxy = new Proxy(obj, {set(target,key,value) {if(!target.hasOwnProperty(key)) {console.log(`新增了属性${key},值为${value}`)}target[key] = valuereturn true}})// 新增 公众号 属性// 输出 新增了属性gzh,值为前端有的玩proxy.gzh = '前端有的玩'has当使用in判断属性是否在proxy代理对象里面时 ， 会触发has
/** * target: 目标对象 ， 即通过proxy代理的对象 * key: 要判断的key是否在target中 */ handle.has(target,key)示例一般情况下我们在js中声明私有属性的时候 ， 会将属性的名字以_开头 ， 对于这些私有属性 ， 是不需要外部调用 ， 所以如果可以隐藏掉是最好的 ， 这时候就可以通过has在判断某个属性是否在对象时 ， 如果以_开头 ， 则返回false
const obj ={publicMethod() {},_privateMethod(){}}const proxy = new Proxy(obj, {has(target, key) {if(key.startsWith('_')) {return false}return Reflect.get(target,key)}})// 输出 falseconsole.log('_privateMethod' in proxy)// 输出 trueconsole.log('publicMethod' in proxy)deleteProperty当使用delete去删除对象里面的属性的时候 ， 会进入deleteProperty`拦截器
/** * target: 目标对象 ， 即通过proxy代理的对象 * key: 要删除的属性 */ handle.deleteProperty(target,key)示例现在有一个用户信息的对象 ， 对于某些用户信息 ， 只允许查看 ， 但不能删除或者修改 ， 对此使用Proxy可以对不能删除或者修改的属性进行拦截并抛出异常 ， 如下
const userInfo = {name: '子君',gzh: '前端有的玩',sex: '男',age: 22}// 只能删除用户名和公众号const readonlyKeys = ['name', 'gzh']const proxy = new Proxy(userInfo, {set(target,key,value) {if(readonlyKeys.includes(key)) {throw new Error(`属性${key}不能被修改`)}target[key] = valuereturn true},deleteProperty(target,key) {if(readonlyKeys.includes(key)) {throw new Error(`属性${key}不能被删除`)return}delete target[key]return true}})// 报错 delete proxy.name


推荐阅读


上一篇：IT世界|教你怎么看当前应用所支持的屏幕刷新率

下一篇：选择遗忘|手机连电脑怎样才用得更爽？它有一个新思路