Proxy 相比Object.defineProperty 是在更高的维度对属性的修改进行拦截。如何理解这句话呢：
Vue2 中，对于给定的 data，如 { count: 1 }，是需要根据具体的 key 也就是 count，去对「修改 data.count 」 和 「读取 data.count」进行拦截，也就是

  1. Object.defineProperty(data, 'count', {
  2.   get() {},
  3.   set() {},
  4. })

必须预先知道要拦截的 key 是什么，这也就是为什么 Vue2 里对于对象上的新增属性无能为力。
而 Vue3 所使用的 Proxy，则是这样拦截的：

  1. new Proxy(data, {
  2.   get(key) { },
  3.   set(key, value) { },
  4. })

可以看到，根本不需要关心具体的 key，它去拦截的是 「修改 data 上的任意 key」 和 「读取 data 上的任意 key」。
所以，不管是已有的 key 还是新增的 key，都逃不过它的魔爪。但是Proxy的强大不仅在于拦截get set, 还可以拦截更多的操作符。

vue next 响应式原理

先最小化的讲解一下响应式的原理，其实就是在 Proxy 第二个参数 handler 也就是陷阱操作符中，拦截各种取值、赋值操作，依托 track 和 trigger 两个函数进行依赖收集和派发更新。

  • track 用来在读取时收集依赖。
  • trigger 用来在更新时触发依赖。