黑马程序员技术交流社区

标题: 【面试系列】Vue之proxy [打印本页]

---

作者: 爱编码的J    时间: 2021-1-17 15:13
标题: 【面试系列】Vue之proxy
Proxy是专门为对象设置访问代理器的，通过Proxy可以轻松监视到对象的读写过程，相比于defineProperty，Proxy他的功能要更为强大甚至使用起来也更为方便。
这里定义一个person对象，通过new Proxy的方式来去为person来创建一个代理对象。
Proxy构造函数的第一个参数就是我们需要代理的对象，这里是person，第二个参数也是一个对象，我们可以把这个对象称之为代理的处理对象，这个对象中可以通过get方法来去监视属性的访问，通过set方法来去介绍对象当中设置属性这样的一个过程。

[JavaScript] 纯文本查看 复制代码

 const person = {

    name: 'zs',

    age: 18,

  };



  const personProxy = new Proxy(person, {

    get() {},

    set() {},

  });

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

[JavaScript] 纯文本查看 复制代码

  {

    get(target, property) {

      console.log(target, property);

      return property in target ? target[property] : undefined;

    }

  }

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

[JavaScript] 纯文本查看 复制代码

{

    set(target, property, value) {

      console.log(target, property, value);

      if (property === 'age') {

        if (!Number.isInteger(value)) {

          throw new TypeError('${value} must be a integer');

        }

      }

      target[property] = value;

    }

  }

相比于Object.defineProperty，Proxy到底有哪些优势
1、首先最明显的优势就是在于Proxy要更为强大一些，那这个强大具体体现在Object.defineProperty只能监听到对象属性的读取或者是写入，而Proxy除读写外还可以监听对象中属性的删除，对对象当中方法的调用等等。
2、是对于数组对象进行监视，通常我们想要监视数组的变化，基本要依靠重写数组方法，这也是Vue的实现方式，proxy可以直接监视数组的变化。以往我们想要通过Object.defineProperty去监视数组的操作最常见的方式是重写数组的操作方法，这也是Vue.js中所使用的方式，大体的方式就是通过自定义的方法去覆盖掉数组原型对象上的push，shift之类的方法，以此来劫持对应的方法调用的过程

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2