简单理解proxy

什么是Proxy？它有什么作用？

Proxy的MDN
据阮一峰文章介绍：Proxy可以理解成，在目标对象之前架设一层 “拦截”，当外界对该对象访问的时候，都必须经过这层拦截，而Proxy就充当了这种机制，类似于代理的含义，它可以对外界访问对象之前进行过滤和改写该对象。

在vue2.+中

我们知道在Vue2.xx中使用 Object.defineProperty()方法对该对象通过 递归+遍历的方式来实现对数据的监控的。但是当我们使用数组的方法或改变数组的下标是不能重新触发 Object.defineProperty中的set()方法的，因此就做不到实时响应了。所以使用Object.defineProperty 存在如下缺点`：

1.监听数组的方法不能触发Object.defineProperty方法中的set操作(如果要监听的到话，需要重新编写数组的方法)。
2.必须遍历每个对象的每个属性，如果对象嵌套很深的话，需要使用递归调用。

因此vue3.xx中之后就改用Proxy来更好的解决如上面的问题。在学习使用Proxy实现数据双向绑定之前，我们还是一步步来，先学习了Proxy基本知识点。

Proxy的基本语法

const obj = new Proxy(target, handler);

参数说明如下：

target: 被代理对象。

handler: 是一个对象，声明了代理target的一些操作。

但是当外界每次对obj进行操作时，就会执行handler对象上的一些方法。handler中常用的对象方法如下：

1. get(target, propKey, receiver)
2. set(target, propKey, value, receiver)
3. has(target, propKey)

如上是Proxy中handler 对象的方法，其实它和Reflect里面的方法类似的

const target = {
   
  name: 'artiely'
};

const handler = {
   
  get: function(target, key) {
   
    console.log(`${
     key} 被读取`);
    return target[key];
  },
  set: function(target, key, value) {
   
    console.log(`${
     key} 被设置为 ${
     value}`);
    target