Vue 3响应式原理：为什么用Proxy取代defineProperty

Vue 2用Object.defineProperty做响应式。组件创建时，Vue遍历data的每个属性，替换成getter/setter，读时dep.depend()、写时dep.notify()。这套有具体问题。第一，检测不到属性增删——this.user.age = 20在age原本不存在时完全不触发更新。第二，拦不住数组下标和.length——arr[0] = x、arr.length = 0都不响应，所以Vue 2给7个数组方法打补丁（push、pop、splice等）手动触发。第三，创建时要递归整个对象树，大对象启动非常慢。Vue 3用Proxy。Proxy是原生JS特性，用一个handler把对象包起来，拦截所有操作——get、set、has、deleteProperty、ownKeys全覆盖。不需要预处理。get陷阱里调track(target, key)记录"当前活跃的effect依赖这个属性"；set陷阱里调trigger(target, key)通知所有跟踪过这个属性的effect。属性增删、数组下标、Map/Set变更全部天然捕获。Proxy还是惰性的——顶层对象被包，访问到某个嵌套属性时Vue才把嵌套值再包一层Proxy返回。也就是说只有真正触达的路径才会有响应式开销，大state树启动成本骤降。两个主要API：reactive(obj)给对象返回Proxy。ref(value)处理原始值——原始值不能被Proxy包，所以ref返回{value: x}外面套响应式，访问.value会被拦截。模板里ref会自动解包，所以模板里写refName而不是refName.value，但script代码里必须写.value，这是最常见的踩坑点。track和trigger是底层原语，computed、watch、render effect本质上都是effect()——在读时注册依赖，写时重新运行。