学习记录（Vue3响应式）

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 = null

class Dep {
  constructor() { this.subscribers = new Set() }
  depend() { if (activeEffect) this.subscribers.add(activeEffect) }
  notify() { this.subscribers.forEach(fn => fn()) }
}

function effect(fn) {
  activeEffect = fn
  fn()
  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] = val
      const 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	直接响应
性能	递归遍历所有属性	按需代理