开放、分享、自由、中立、公平网吧论坛公众号APP(送下载币任务) 微信公众号

天下网吧论坛

 找回密码
 注册账号

QQ登录

只需一步,快速开始

用微信登录

扫一扫,用微信登录

查看: 3750|回复: 0
收起左侧

[经验分享] VUE里关于Proxy的知识,看这篇就能应付面试了

[复制链接]
发表于 2020-12-28 13:44:31 | 显示全部楼层 |阅读模式 发布于:福建省福州市 电信
Proxy
在2020年来看Proxy早已经不是一个陌生的词了,他能做的是有很多,尤其在Vue3.0通过Proxy来重构之后,很多面试官喜欢问这个Proxy以及和Object.defineProperty的对比。

Proxy是专门为对象设置访问代理器的,通过Proxy可以轻松监视到对象的读写过程,相比于defineProperty,Proxy他的功能要更为强大甚至使用起来也更为方便。

这里我们定义一个person对象,我们通过new Proxy的方式来去为我们的person来创建一个代理对象。

Proxy构造函数的第一个参数就是我们需要代理的对象,这里是person,第二个参数也是一个对象,我们可以把这个对象称之为代理的处理对象,这个对象中可以通过get方法来去监视属性的访问,通过set方法来去介绍对象当中设置属性这样的一个过程。
  1. const person = {
  2.     name: 'yd',
  3.     age: 18
  4. }

  5. const personProxy = new Proxy(person, {
  6.     get() {},
  7.     set() {}
  8. })
复制代码

先来看get方法,这个方法最简单可以接收两个参数,第一个就是所代理的目标对象,第二个就是外部所访问的这个属性的属性名。这个方法的返回值将会作为外部去访问这个属性得到的结果。

  1. {
  2.     get(target, property) {
  3.         console.log(target, property);
  4.         return property in target ? target[property] : undefined;
  5.     }
  6. }
复制代码

再来看下set方法,这个方法默认接收三个参数, 分别是代理目标对象,以及我们要写入的属性名称还有最后我们要写入的属性值。我们可以做一些校验,比如说如果设置的是age,他的值就必须是整数,否则就抛错。

  1. {
  2.     set(target, property, value) {
  3.         console.log(target, property, value);
  4.         if (property === 'age') {
  5.             if (!Number.isInteger(value)) {
  6.                 throw new TypeError(``${value} must be a integer);
  7.             }
  8.         }
  9.         target[property] = value;
  10.     }
  11. }
复制代码

相比于Object.defineProperty, Proxy到底有哪些优势。

首先最明显的优势就是在于Proxy要更为强大一些,那这个强大具体体现在Object.defineProperty只能监听到对象属性的读取或者是写入,而Proxy除读写外还可以监听对象中属性的删除,对对象当中方法的调用等等。

第二点优势就是对于数组对象进行监视,通常我们想要监视数组的变化,基本要依靠重写数组方法,这也是Vue的实现方式,proxy可以直接监视数组的变化。以往我们想要通过Object.defineProperty去监视数组的操作最常见的方式是重写数组的操作方法,这也是Vue.js中所使用的方式,大体的方式就是通过自定义的方法去覆盖掉数组原型对象上的push,shift之类的方法,以此来劫持对应的方法调用的过程。

本文转自微信公众号文章:从面试官角度看一次前端面试经历(6 个考察点)
https://mp.weixin.qq.com/s/4wt-ulMx6EKcV75W5ioPrw

赶紧来设置你的签名->玩转天下网吧论坛签名

您需要登录后才可以回帖 登录 | 注册账号   扫一扫,用微信登录

本版积分规则

下载天下网吧手机APP,直接一键登录
您尚未登录,请登陆后浏览更精彩内容!
 注册账号
找回密码

手机版|纯文字版|联系我们|免责声明|网吧论坛 ( __ICP号__ )

GMT+8, 2024-3-28 19:38 , Processed in 1.310358 second(s), 33 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表