探秘Vue 3 中 Proxy 的精妙封装，揭示 reactive 函数的强大内涵

前端

2023-09-22 07:52:20

揭开Proxy的神秘面纱：数据劫持的艺术

在深入了解 Vue 3 中 Proxy 的封装之前，让我们先来揭开 Proxy 的神秘面纱，一窥数据劫持的艺术。Proxy 是 JavaScript 中的一项强大特性，它允许您创建对象代理，可以拦截和修改对象上的操作。

当您使用 Proxy 包装一个对象时，它会在内部创建一个新的对象，称为代理对象。代理对象与原始对象具有相同的功能，但它能够拦截对原始对象的操作，并在内部进行处理。这正是数据劫持的精髓所在。

reactive 函数的魅力：将 Proxy 的力量注入 Vue 3

Vue 3 中的 reactive 函数正是利用了 Proxy 的强大功能，实现了对数据的劫持和监听。当您使用 reactive 函数包装一个对象时，它会在内部创建一个代理对象，并对该代理对象进行监听。

一旦代理对象上的数据发生改变，监听器就会被触发，从而通知 Vue 3 进行相应的更新。这种机制保证了数据和视图的一致性，让 Vue 3 能够响应式地更新视图。

亲自动手：使用 Proxy 手写一个 reactive 函数

为了更好地理解 Vue 3 中 Proxy 的封装，让我们亲自动手使用 Proxy 手写一个 reactive 函数。以下是代码示例：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      // 数据劫持：监听数据变化
      track(target, key)
      // 返回原始值
      return Reflect.get(target, key)
    },
    set(target, key, value) {
      // 数据劫持：触发视图更新
      trigger(target, key)
      // 设置新值
      return Reflect.set(target, key, value)
    }
  })
}