我们首先回顾一下 Vue2 中 Object.defineProperty 的缺点：

1. 深度监听，需要一次性递归到底（关键在于一次性，如果数据层级很深的话，一次性递归到底很耗时）
2. 无法监听新增属性、删除属性（所以有 Vue.set、Vue.delete）
3. 无法原生监听数组，需要特殊处理

Vue3 响应式：

Vue3 使用 Proxy 实现响应式，可以监听新增属性与删除属性。

// 响应式函数
function reactive(target) {
  if (typeof target !== 'object' || target == null) {
    // 不是对象或数组，则返回
    return target
  }

  // 代理配置
  const proxyConf = {
    // target就是obj，receiver就是proxyData
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      console.log('get', key);
      return result;
    },
    // set不仅可以监听到设置属性，也可以监听到新增属性
    set(target, key, val, receiver) {
      const result = Reflect.set(target, key, val, receiver);
      console.log('set', key, val);
      return result; // 是否设置成功
    },
    // 可以监听到删除属性
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key);
      console.log('delete property', key);
      return result; // 是否删除成功
    }
  }

  // 生成代理对象
  const observed = new Proxy(target, proxyConf)
  return observed
}

// 测试数据
const obj = {
  name: 'lily',
  age: 20
}

const proxyData = reactive(obj)

测试一下，已经实现了对象的监听读取属性、修改属性、新增属性、删除属性。

我们再测试一下对数组的监听：

const arr = [1, 2, 3]
const proxyData2 = reactive(arr)

我们可以直接监听数组。但是发现了另外2个问题：① 我们不应该监听原型属性；② 如果是重复的数据应该不处理。

改进以上问题：

因此我们做如下改进：

我们再测试一下：

现在就可以对数组和对象进行基础的监听了。但是我们还有2个问题没有解决：① 如何实现深度监听；② 如何区分是新增属性还是修改属性。

实现深度监听：

测试数据：

const obj = {
  name: 'lily',
  age: 20,
  info: {
    city: 'xian'
  }
}

它值输出了 get info 而并没有输出 get city，说明并没有监听到 city 属性，也就是未实现深度监听。因为我们做如下修改：

再测试一下，实现了深度监听：

Vue2 的 Object.defineProperty 也可以实现深度监听，那 Vue3 的 proxy 的优点在哪呢？Vue2 的 Object.defineProperty 实现深度监听时，会一次性递归到底，计算量大！而 Vue3 的 proxy 是在 get 中实现递归，也就是什么时候 get 什么时候往下一层递归。 Vue3 的 proxy 本质就是你获取到哪一层，哪一层才会触发响应式，并非一次性递归到底，性能得到很大提升。我们看测试就能看出这一点：

测试用例：

const obj = {
  name: 'lily',
  age: 20,
  info: {
    city: 'xian',
    a: {
      b: {
        
        c: 0
      }
    }
  }
}

const proxyData = reactive(obj)

如何判断是新增属性还是修改属性：

只需做如下修改：

测试：

总结：

proxy 可以规避 Object.defineProperty 的问题：

• 深度监听的性能更好
• 可以监听新增属性、删除属性
• 可以监听数组变化

但是 proxy 目前无法兼容所有浏览器，也无法 polyfill。

完整代码：

// 响应式函数
function reactive(target) {
  if (typeof target !== 'object' || typeof target == null) {
    // 不是对象或数组，则返回
    return target
  }

  // 代理配置
  const proxyConf = {
    // target就是obj，receiver就是proxyData
    get(target, key, receiver) {
      // 只处理本身属性，不处理原型属性
      const ownKeys = Reflect.ownKeys(target);
      if(ownKeys.includes(key)) {
        console.log('get', key);
      }

      const result = Reflect.get(target, key, receiver);
      // 深度监听
      return reactive(result);
    },
    // set不仅可以监听到设置属性，也可以监听到新增属性
    set(target, key, val, receiver) {
      // 重复的数据不处理
      const oldVal = target[key];
      if (val === oldVal) {
        return true;
      }

      // 如何判断是新增属性还是修改属性
      const ownKeys = Reflect.ownKeys(target);
      if(ownKeys.includes(key)) {
        console.log('已有的key', key);
      } else {
        console.log('新增的key', key);
      }

      const result = Reflect.set(target, key, val, receiver);
      console.log('set', key, val);
      return result; // 是否设置成功
    },
    // 可以监听到删除属性
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key);
      console.log('delete property', key);
      return result; // 是否删除成功
    }
  }

  // 生成代理对象
  const observed = new Proxy(target, proxyConf);
  return observed;
}

// 测试数据
const obj = {
  name: 'lily',
  age: 20,
  info: {
    city: 'xian',
    a: {
      b: {
        c: 0
      }
    }
  }
};
const arr = [1,2,3];
const proxyData = reactive(obj);
const proxyData1 = reactive(arr);