A. 基础版:

// 简易 Dep 实现
class Dep {
    constructor{ this.subs = new Set; }
    depend{ if this.subs.add; }
    notify{ this.subs.forEach); }
}
let activeEffect = null;
function watchEffect{
   activeEffect = fn;
   fn;               // 执行一次让 getter 收集依赖
   activeEffect = null;
}
// 响应化函数
function observe{
   ifreturn;
   Object.keys.forEach(key=>{
      let val=obj;
      const dep=new Dep;
      Object.defineProperty(obj,key,{
          get{ dep.depend; return val; },
          set{ 
              ifreturn;
              val=newV; 
              observe; 
              dep.notify;
          }
      });
   });
}
// 使用示例
const state={count:0};
observe;
watchEffect=>console.log);
state.count=1;   // 控制台自动打印新值

B. 基于 Proxy 的进阶版:

const targetMap = new WeakMap;
let activeEffect=null;
function track{
   ifreturn;
   let depsMap=targetMap.get;
   if{ depsMap=new Map; targetMap.set; }
   let dep=depsMap.get;
   if{ dep=new Set; depsMap.set; }
   dep.add;
}
function trigger{
   const depsMap=targetMap.get;
   ifreturn;
   const dep=depsMap.get;
   if{ dep.forEach); }
}
function effect{
   activeEffect=fn;
   fn;
   activeEffect=null;
}
function reactive{
   ifreturn obj;
   return new Proxy(obj,{
       get{ track; const res=Reflect.get; return typeof res==='object'?reactive:res; },
       set{
           const old=Reflect.get;
           ifreturn true;
           const ok=Reflect.set;
           trigger;
           return ok;
       },
       deleteProperty{
           const ok=Reflect.deleteProperty;
           trigger;
           return ok;
       }
   });
}
// 示例
const state=reactive;
effect=>console.log);
effect=>console.log);
state.msg='world';      // 自动打印新值
state.nested.num=20;     // 自动打印新值
state.nested.new='x';    // 新增字段也Neng响应

五、常见失效场景与防坑技巧

#直接替换对象导致失效#： Ru果你用 `this.user = {...this.user}` 替换整个对象，旧的 Dep 将失去关联。解决办法是使用 `Object.assign` 或者在 Vue 3 中直接赋值给同一代理实例即可保持响应性。