Vue 3.x 中采用 Proxy 对象进行数据劫持 详解

在 Vue 2.x 中，使用的是 Object.defineProperty() 进行数据劫持，但是这种方法有一些缺点，比如无法监听数组的变化，还需要递归遍历对象属性进行绑定。

在 Vue 3.x 中，采用了 Proxy 对象进行数据劫持。Proxy 对象可以拦截对象的读取、赋值、删除等操作，比 Object.defineProperty() 更加强大。

下面我们来看一下 Proxy 对象在 Vue 3.x 中的应用。

首先，我们创建一个 reactive 函数，它接收一个普通对象，返回一个响应式的对象。

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      console.log('get', key)
      return Reflect.get(target, key)
    },
    set(target, key, value) {
      console.log('set', key, value)
      return Reflect.set(target, key, value)
    },
    deleteProperty(target, key) {
      console.log('delete', key)
      return Reflect.deleteProperty(target, key)
    }
  })
}

上面的代码中，我们创建了一个 Proxy 对象，其中 get、set、deleteProperty 方法分别对应了读取、赋值、删除操作。在这些方法中，我们可以打印出操作的类型以及操作的属性名，方便我们调试。

接下来，我们创建一个普通对象，并使用 reactive 函数将其转为响应式对象。

const obj = reactive({
  name: 'Tom',
  age: 18,
  hobbies: ['reading', 'music']
})

现在，我们可以通过访问 obj 的属性来触发 get、set、deleteProperty 方法。

console.log(obj.name) // 输出 get name, Tom
obj.age = 20 // 输出 set age 20
delete obj.hobbies // 输出 delete hobbies

可以看到，我们成功地拦截了对象的读取、赋值、删除操作，并打印出了相关信息。

除了上述常用的方法外，Proxy 还有许多其他的拦截方法，如 has、apply、construct 等，可以满足更多的需求。

总的来说，Vue 3.x 中采用 Proxy 对象进行数据劫持，使得响应式系统更加强大、灵活，提高了开发效率，是一个非常不错的改进。