如何利用Proxy实现数据绑定和响应式系统，以及它在现代前端框架中的核心作用是什么？

betcha

发布时间：2025-09-19 11:08:01

859人浏览过

来源于php中文网

原创

Proxy相较于Object.defineProperty，能拦截所有对象操作（如属性增删、数组方法），实现更全面的响应式系统；其优势在于无需额外补丁即可自动追踪动态变化，支持细粒度更新，提升性能与开发体验。

如何利用proxy实现数据绑定和响应式系统，以及它在现代前端框架中的核心作用是什么？

Proxy通过提供对目标对象操作的拦截能力，实现了数据绑定和响应式系统，它在现代前端框架中扮演着核心角色，允许框架在数据发生变化时自动、高效地更新UI。在我看来，它就像给数据对象装了一个“看门狗”，任何对数据的读写操作都得先经过它，这样框架就能精准地知道什么时候数据变了，以及具体变了什么。

解决方案

利用Proxy实现数据绑定和响应式系统，其核心在于创建一个代理对象来“包裹”原始数据对象。这个代理对象能够拦截所有针对原始对象的各种操作，比如读取属性（

get

）、设置属性（

set

）、删除属性（

deleteProperty

）等。当这些操作被拦截时，我们就可以在其中插入我们自己的逻辑：例如，在读取属性时，可以记录当前正在执行的“副作用”（比如一个渲染函数或计算属性），这就是所谓的“依赖收集”；而在设置属性时，则可以通知所有依赖于这个属性的“副作用”去重新执行，从而实现UI的更新，这就是“派发更新”。

相较于过去常用的

Object.defineProperty

，Proxy的优势在于它能拦截几乎所有操作，包括对新属性的添加、属性的删除，甚至是数组的变动（比如

push

、

pop

等），而

defineProperty

在这方面就显得力不从心，需要很多额外的“打补丁”操作。有了Proxy，我们就能构建出更健壮、更全面的响应式系统，开发者无需再为那些“意料之外”的数据变动而头疼。

一个非常简化的Proxy响应式系统核心逻辑可能长这样：

立即学习“前端免费学习笔记（深入）”；

function createReactive(target) {
  const handler = {
    get(target, key, receiver) {
      // 依赖收集：记录当前正在执行的effect
      console.log(`获取属性: ${key}`);
      track(target, key); 
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      // 派发更新：通知所有依赖这个key的effect重新执行
      console.log(`设置属性: ${key} = ${value}`);
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key);
      return result;
    }
    // 还可以拦截deleteProperty, has, ownKeys等更多操作
  };
  return new Proxy(target, handler);
}

// 假设有一个简陋的依赖收集和派发更新机制
const activeEffect = null; // 模拟当前激活的副作用
const targetMap = new WeakMap(); // 存储target -> key -> effects

function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      targetMap.set(target, (depsMap = new Map()));
    }
    let dep = depsMap.get(key);
    if (!dep) {
      depsMap.set(key, (dep = new Set()));
    }
    dep.add(activeEffect);
  }
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => effect());
  }
}

// 示例用法：
let data = createReactive({ count: 0, message: 'Hello' });

// 模拟一个副作用 (例如一个渲染函数)
const effectFn = () => {
  console.log(`副作用执行: count is ${data.count}, message is ${data.message}`);
};

// 激活副作用，让它在执行时收集依赖
const runEffect = (fn) => {
  activeEffect = fn;
  fn();
  activeEffect = null;
};

runEffect(effectFn); // 第一次执行，收集data.count和data.message的依赖

data.count++; // 触发set，然后触发effectFn重新执行
data.message = 'World'; // 再次触发set，再次触发effectFn重新执行

Proxy与Object.defineProperty在实现响应式系统时有哪些关键差异和优势？

说实话，这两种机制在前端响应式演进史上都扮演了重要角色，但Proxy无疑是更现代、更强大的选择。

Object.defineProperty

在Vue 2时代大放异彩，它通过遍历对象属性，为每个属性定义

getter

和

setter

来劫持数据访问。这种方式的问题在于，它无法直接监听对象属性的增删，也无法直接监听数组索引的变化和数组方法的调用（比如

push

pop

）。这意味着如果你给一个已存在的响应式对象添加新属性，或者直接通过索引修改数组元素，

defineProperty

是“看不见”的，需要一些额外的API（比如Vue的

$set

）或者对数组原型方法进行“魔改”才能解决。这种“打补丁”式的做法，虽然能用，但总觉得有点不够优雅，而且在某些边缘情况下容易出问题。

而Proxy则完全不同，它在对象层面进行拦截，而不是针对单个属性。这意味着，你可以拦截对目标对象的所有操作，包括：

```
get
```
(读取属性)
```
set
```
(设置属性)
```
deleteProperty
```
(删除属性)
```
has
```
(判断属性是否存在，
```
in
```
操作符)
```
ownKeys
```
(获取所有属性键，
```
Object.keys()
```
等)
```
apply
```
(函数调用)
```
construct
```
(
```
new
```
操作符) 等等。

这种全方位的拦截能力，让Proxy在实现响应式系统时拥有了无与伦比的优势。它能自然地处理新属性的添加和旧属性的删除，因为这些操作都会被

set

或

deleteProperty

陷阱捕获。对于数组，Proxy也能完美拦截对数组索引的访问和修改，以及所有数组原型方法的调用，因为这些操作最终都会触发

get

或

set

。这使得响应式系统能够更加“透明”和“彻底”，开发者无需记住额外的规则或API，就能直观地操作数据。从底层实现的角度看，Proxy减少了大量手动“修补”的复杂性，让响应式系统的代码逻辑变得更清晰、更易维护。

在Vue 3等现代前端框架中，Proxy如何支撑其高效的响应式更新机制？

在Vue 3中，Proxy是其响应式系统的基石，它让Vue 3的响应式能力达到了一个全新的高度。Vue 3的

reactive

和

ref

API，都离不开Proxy的幕后支持。

当你使用

reactive(object)

创建一个响应式对象时，Vue 3会利用Proxy来深度地包裹这个

object

。这意味着，不仅仅是

object

本身，它内部嵌套的每一个对象（如果不是原始值）也会被递归地转换成Proxy。这样一来，无论你访问或修改这个响应式对象的哪个层级、哪个属性，Proxy都能精确地捕获到这些操作。

具体来说，Vue 3的响应式系统内部有一套精密的“依赖追踪”和“派发更新”机制。当一个“副作用”（比如组件的渲染函数、

computed

属性的回调、

watch

的回调）执行时，它会先被标记为“当前激活的副作用”。然后，当这个副作用访问响应式对象的某个属性时，Proxy的

get

陷阱会被触发。在这个陷阱里，Vue 3会记录下“当前激活的副作用”依赖于“这个响应式对象的这个属性”。这就是所谓的“依赖收集”。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

下载

当响应式对象的某个属性值发生变化时，Proxy的

set

陷阱会被触发。在这个陷阱里，Vue 3会查找所有依赖于“这个响应式对象的这个属性”的副作用，并通知它们重新执行。这就是“派发更新”。由于Proxy能够精准地拦截到所有类型的操作，包括属性的增删和数组的各种变动，Vue 3的响应式系统能够实现非常细粒度的更新。这意味着只有真正受影响的组件或副作用才会重新执行，大大减少了不必要的渲染和计算，从而提升了应用的整体性能和用户体验。

此外，Vue 3的