Vue3用Proxy替代Object.defineProperty，解决了：
数组索引变化检测，动态添加属性，更细粒度的依赖追踪。
关键点：Proxy拦截对象操作，在get时收集依赖，在set时触发更新，实现数据变化自动更新视图。
Proxy示例：
const obj = { count: 0 }
const proxy = new Proxy(obj, {get(target, key) { console.log('读取', key); return target[key] },set(target, key, val) { console.log('修改', key); target[key] = val; return true }
})
实现依赖收集：
let activeEffect = nullclass Dep {constructor() { this.subscribers = new Set() }depend() { if (activeEffect) this.subscribers.add(activeEffect) }notify() { this.subscribers.forEach(fn => fn()) }
}function effect(fn) {activeEffect = fnfn()activeEffect = null
}function reactive(obj) {const deps = new Map()return new Proxy(obj, {get(target, key) {let dep = deps.get(key)if (!dep) {dep = new Dep()deps.set(key, dep)}dep.depend() // 收集依赖return target[key]},set(target, key, val) {target[key] = valconst dep = deps.get(key)if (dep) dep.notify() // 触发更新return true}})
}
示例：
const state = reactive({ count: 0 })effect(() => {console.log('count变化:', state.count)
})state.count = 1 // 自动输出: "count变化: 1"
对比Vue2优势
| 方面 | Vue2 | Vue3 |
|---|---|---|
| 数组检测 | 需重写方法 | 直接支持 |
| 新增属性 | 需Vue.set | 直接响应 |
| 性能 | 递归遍历所有属性 | 按需代理 |