关于新入坑vue3相关问题

刚刚接触vue3,对于现在的Proxy对象有点没理解,目前的请求会返回一个proxy对象值,他里面包含[[Handler]][[Target]][[IsRevoked]], 我想请问,这个值要怎么获取,为什么要返回这样的对象,而不是我们平常接触到正常的对象值?这样做的意义是?

阅读 1.2k
2 个回答
✓ 已被采纳

首先搞清楚[[]]这个符号在JS里代表什么。在JS里,[[Target]]这种两个括号包裹的属性,属于内部特性,这种些特性开发者无法直接访问。之所以你在F12里打印proxy对象能够看到这些内部特性,我认为是为了让开发者明确知道这个对象是被代理过的,否则就无法区分普通对象和代理对象了。

F12里打印的对象,都会有意的显示一些内部特性,比如[[prototype]]。但这些内部特性和对象上直接可以获取的属性是并不是同一个东西。

也就是说你打印出来看到的这个对象,浏览器会显示地告诉你它是一个proxy包装过的对象,你该怎么正常操作对象还是怎么操作,并不是通过proxy.Target这样去获取。

已参与 「极客观点」 ,欢迎正在阅读的你也加入。

Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。

handler
包含捕捉器(trap)的占位符对象,可译为处理器对象。
traps
提供属性访问的方法。这类似于操作系统中捕获器的概念。
target
被 Proxy 代理虚拟化的对象。它常被作为代理的存储后端。根据目标验证关于对象不可扩展性或不可配置属性的不变量(保持不变的语义)。

以上官方定义。

首先,Proxy这个单词翻译过来,就是 代理。
可以理解为,有一个很火的明星,开通了一个微博账号,这个账号非常活跃,回复粉丝、到处点赞之类的,但可能并不是真的由本人在维护的。
而是在背后有一个其他人 or 团队来运营,我们就可以称他们为代理人,因为他们发表的微博就代表了明星本人的意思。
P.S. 强行举例子,因为本人不追星,只是猜测可能会有这样的运营团队

这个代入到JavaScript当中来,就可以理解为对对象或者函数的代理操作。

JavaScript中的Proxy
Proxy是ES6中提供的新的API,可以用来定义对象各种基本操作的自定义行为
(在文档中被称为traps,我觉得可以理解为一个针对对象各种行为的钩子)
拿它可以做很多有意思的事情,在我们需要对一些对象的行为进行控制时将变得非常有效。

let obj = {
  _age: 18,
  get age ()  {
    return `I'm ${this._age} years old`
  },
  set age (val) {
    this._age = Number(val)
  }
}

console.log(obj.age) // I'm 18 years old
obj.age = 19
console.log(obj.age) // I'm 19 years old

已参与 「极客观点」 ,欢迎正在阅读的你也加入。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
logo
极客观点
子站问答
访问
宣传栏