4.9 watch 的实现原理

function watch(source, cb) {
  effect(
    // 触发读取操作，从而建立联系
    () => source.foo,
    {
      scheduler() {
        cb() // 数据变化时执行回调
      }
    }
  )
}

watch(obj, () => console.log('数据变了'))
obj.foo++ // → 打印「数据变了」

function traverse(value, seen = new Set()) {
  // 原始值或已读取过则直接返回（后者用于避免循环引用死循环）
  if (typeof value !== 'object' || value === null || seen.has(value)) return
  seen.add(value)
  // 假设 value 是对象：逐个读取属性并递归遍历
  for (const k in value) {
    traverse(value[k], seen)
  }
  return value
}

function watch(source, cb) {
  effect(
    () => traverse(source), // 递归读取，任意属性变化都能触发
    { scheduler: () => cb() }
  )
}

function watch(source, cb) {
  let getter
  if (typeof source === 'function') {
    getter = source                // 用户传 getter：依赖由用户指定
  } else {
    getter = () => traverse(source) // 传对象：递归读取全部属性
  }
  effect(() => getter(), { scheduler: () => cb() })
}

watch(
  () => obj.foo, // 只关心 obj.foo
  () => console.log('数据变了')
)

function watch(source, cb) {
  let getter
  if (typeof source === 'function') {
    getter = source
  } else {
    getter = () => traverse(source)
  }

  let oldValue, newValue

  const effectFn = effect(
    () => getter(),
    {
      lazy: true,           // 不立即执行，改为手动调用以拿旧值
      scheduler() {
        newValue = effectFn() // 重新执行副作用函数得到新值
        cb(newValue, oldValue) // 新旧值作为回调参数
        oldValue = newValue    // 更新旧值，否则下次拿到的旧值是错的
      }
    }
  )

  // 手动执行一次，返回值就是旧值
  oldValue = effectFn()
}