4.2 响应式数据的基本实现

// 存储副作用函数的「桶」
const bucket = new Set()
// 原始数据
const data = { text: 'hello world' }

const obj = new Proxy(data, {
  // 拦截读取：收集副作用函数
  get(target, key) {
    bucket.add(effect) // 把 effect 放进桶里
    return target[key]
  },
  // 拦截设置：触发副作用函数
  set(target, key, newVal) {
    target[key] = newVal
    bucket.forEach(fn => fn()) // 取出桶里的函数挨个执行
    return true                // 返回 true 代表设置成功
  }
})

function effect() {
  document.body.innerText = obj.text
}

effect() // 先执行一次 → 触发读取 → 完成收集
setTimeout(() => {
  obj.text = 'hello vue3' // 1 秒后修改 → 副作用函数重新执行
}, 1000)

// 全局变量：存储当前被注册的副作用函数
let activeEffect

function effect(fn) {
  activeEffect = fn // 注册时先记住它
  fn()              // 再执行；执行期间的读取都算它的依赖
}

const obj = new Proxy(data, {
  get(target, key) {
    if (activeEffect) {
      bucket.add(activeEffect) // 收集的是「当前」的副作用函数
    }
    return target[key]
  },
  set(target, key, newVal) {
    target[key] = newVal
    bucket.forEach(fn => fn())
    return true
  }
})

effect(() => {
  console.log('effect run')
  document.body.innerText = obj.text
})

// 副作用函数中并没有读取 notExist 属性
obj.notExist = 'hello vue3' // 仍然触发了副作用函数 → 错误