031.Reactive

[mewcoder]

实现一个 Reactive 方法，返回可监听 key 变化的函数

// 实现
function Reactive() {
  // ...
}

// 测试
const obj = { a: 1, b: 2 };

const reactive = Reactive(obj);
reactive.subscribe((key, oldValue, newValue) => {
  console.log(key, oldValue, newValue);
});

reactive.state.a = 3; // console.log('a', 1,2)
reactive.state.c = 10; //console.log('c', undefined, 10)

[mewcoder]

function Reactive(obj) {
  handlers = [];

  const subscribe = (handler) => {
    handlers.push(handler);
  };

  const notify = (key, oldValue, newValue) => {
    handlers.forEach((handler) => handler(key, oldValue, newValue));
  };

  const proxy = new Proxy(obj, {
    set(target, key, value) {
      if (value !== target[key]) {
        notify(key, target[key], value);
        target[key] = value;
      }
      return true;
    },
  });

  return {
    subscribe,
    state: proxy,
  };
}