js reactive

// 使用 Proxy 实现简单的响应式系统

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      console.log(`getting ${key}`);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log(`setting ${key} to ${value}`);
      return Reflect.set(target, key, value, receiver);
    }
  });
}

// 示例对象
const data = reactive({
  message: 'Hello, world!'
});

// 访问属性
console.log(data.message); // 输出: getting message
                            // Hello, world!

// 修改属性
data.message = 'Hello, reactive!'; // 输出: setting message to Hello, reactive!
console.log(data.message); // 输出: getting message
                           // Hello, reactive!

解释说明：

1. reactive 函数：该函数接收一个对象 obj，并返回一个新的 Proxy 对象。Proxy 是 JavaScript 中用于拦截和自定义对象操作的内置对象。
2. get 拦截器：当访问对象的属性时，会触发 get 拦截器，并输出访问的属性名。
3. set 拦截器：当修改对象的属性时，会触发 set 拦截器，并输出修改的属性名和新值。
4. 示例对象 data：我们创建了一个包含 message 属性的对象，并通过 reactive 函数将其变为响应式对象。
5. 访问和修改属性：通过访问和修改 data 对象的属性，可以看到控制台输出的日志信息，表明属性的访问和修改都被拦截并记录下来了。

这种机制可以用来实现类似于 Vue.js 或 React 的响应式数据绑定功能。