使用 JavaScript Proxy 实现简单的数据绑定

Question

使用 JavaScript Proxy，可以实现简单的数据绑定。下面是一个例子：

// 定义一个数据对象
const data = {
  name: 'Alice',
  age: 25
};

// 定义一个监听器
const listener = {
  set(target, key, value) {
    console.log(`${key} changed from ${target[key]} to ${value}`);
    target[key] = value;
  }
};

// 创建代理对象
const proxy = new Proxy(data, listener);

// 修改数据
proxy.name = 'Bob'; // 输出：name changed from Alice to Bob
proxy.age = 30; // 输出：age changed from 25 to 30

在上面的例子中，我们通过创建一个 Proxy 对象来监听数据对象的变化。当修改数据对象的属性时，代理对象会调用监听器的 set 方法，并输出属性和值的变化情况。

这是一个简单的数据绑定实现，可以通过监听器来处理数据变化的逻辑。这样，当数据发生变化时，就可以及时更新相关的视图或状态等。