1
// 当前正在执行的 effect
2
let activeEffect = null
3
// effect 栈，处理嵌套 effect
4
const effectStack = []
5
// 存储依赖关系：target -> key -> effects
6
const targetMap = new WeakMap()
7

8
function track(target, key) {
9
  if (!activeEffect) return
10

11
  let depsMap = targetMap.get(target)
12
  if (!depsMap) {
13
    targetMap.set(target, (depsMap = new Map()))
14
  }
15

16
  let deps = depsMap.get(key)
17
  if (!deps) {
18
    depsMap.set(key, (deps = new Set()))
19
  }
20

21
  deps.add(activeEffect)
22
  // 反向收集，用于 cleanup
23
  activeEffect.deps.push(deps)
24
}
25

26
function trigger(target, key) {
27
  const depsMap = targetMap.get(target)
28
  if (!depsMap) return
29

30
  const effects = depsMap.get(key)
31
  if (!effects) return
32

33
  // 创建新 Set 避免无限循环
34
  const effectsToRun = new Set()
35
  effects.forEach(effect => {
36
    // 避免自身触发自身
37
    if (effect !== activeEffect) {
38
      effectsToRun.add(effect)
39
    }
40
  })
41

42
  effectsToRun.forEach(effect => {
43
    // 如果有调度器，使用调度器执行
44
    if (effect.options.scheduler) {
45
      effect.options.scheduler(effect)
46
    } else {
47
      effect()
48
    }
49
  })
50
}

1
const reactiveMap = new WeakMap()
2

3
function reactive(target) {
4
  // 避免重复代理
5
  if (reactiveMap.has(target)) {
6
    return reactiveMap.get(target)
7
  }
8

9
  const proxy = new Proxy(target, {
10
    get(target, key, receiver) {
11
      // 标记已被代理
12
      if (key === '__v_isReactive') return true
13

14
      const result = Reflect.get(target, key, receiver)
15

16
      // 收集依赖
17
      track(target, key)
18

19
      // 深层代理：惰性转换
20
      if (typeof result === 'object' && result !== null) {
21
        return reactive(result)
22
      }
23

24
      return result
25
    },
26

27
    set(target, key, value, receiver) {
28
      const oldValue = target[key]
29
      const result = Reflect.set(target, key, value, receiver)
30

31
      // 值变化时才触发
32
      if (oldValue !== value && (oldValue === oldValue || value === value)) {
33
        trigger(target, key)
34
      }
35

36
      return result
37
    },
38

39
    deleteProperty(target, key) {
40
      const hadKey = Object.prototype.hasOwnProperty.call(target, key)
41
      const result = Reflect.deleteProperty(target, key)
42

43
      if (hadKey && result) {
44
        trigger(target, key)
45
      }
46

47
      return result
48
    }
49
  })
50

51
  reactiveMap.set(target, proxy)
52
  return proxy
53
}

1
function effect(fn, options = {}) {
2
  const effectFn = () => {
3
    // 清除旧依赖，避免分支切换导致的遗留依赖
4
    cleanup(effectFn)
5

6
    activeEffect = effectFn
7
    effectStack.push(effectFn)
8

9
    const result = fn()
10

11
    effectStack.pop()
12
    activeEffect = effectStack[effectStack.length - 1]
13

14
    return result
15
  }
16

17
  effectFn.deps = []
18
  effectFn.options = options
19

20
  if (!options.lazy) {
21
    effectFn()
22
  }
23

24
  return effectFn
25
}
26

27
function cleanup(effectFn) {
28
  for (const deps of effectFn.deps) {
29
    deps.delete(effectFn)
30
  }
31
  effectFn.deps.length = 0
32
}

1
const state = reactive({ price: 100, quantity: 3 })
2

3
const total = computed(() => {
4
  console.log('computed 执行')
5
  return state.price * state.quantity
6
})
7

8
// 第一次访问，执行 getter
9
console.log(total.value) // computed 执行 → 300
10

11
// 第二次访问，命中缓存
12
console.log(total.value) // 300（不打印 "computed 执行"）
13

14
// 修改依赖，标记为 dirty
15
state.price = 200
16

17
// 再次访问，重新计算
18
console.log(total.value) // computed 执行 → 600