一个简易的reactive实现

记录一下，感觉可以在业务代码中制作一个简易工具

function reactive(target) {
  if (typeof target !== 'object' || target === null) {
    console.warn(`reactive 只能用于对象。`);
    return target;
  }

  const handler = {
    get(target, key, receiver) {
      // 依赖收集
      console.log('get',target, key);
      const result = Reflect.get(target, key, receiver);
      if (typeof result === 'object' && result !== null) {
        // 递归地将嵌套对象也转化为响应式对象
        return reactive(result);
      }
      return result;
    },
    set(target, key, value, receiver) {
         const oldVal = target[key]
      const result = Reflect.set(target, key, value, receiver);
      // 触发依赖更新
      console.log('set',oldVal,target, key);
      return result;
    },
    // 还可以拦截其他操作，比如 deleteProperty, has, ownKeys 等
  };

  return new Proxy(target, handler);
}
const val = reactive({a:{b:{c:4}}})