Vue3 响应式系统 - Stellar Observer Protocol

1032 字

5 分钟

Vue3 响应式系统

2025-08-13

Code

前端

/

/

响应式

/

手写代码

题目描述#

实现 Vue3 响应式系统核心功能：

reactive() 创建深层响应式对象
effect() 注册副作用函数并自动追踪依赖
依赖自动收集和触发更新机制
处理嵌套 effect 场景
支持分支切换优化要求实现响应式数据劫持、依赖收集、触发更新等核心机制。

解题思路#

代理拦截：使用 Proxy 拦截对象 get/set 操作
依赖管理：建立 WeakMap→Map→Set 三级依赖存储结构
副作用函数：effect 封装回调并自动追踪依赖
嵌套处理：使用栈结构管理嵌套 effect
依赖清理：每次执行前清除旧依赖，避免无效更新

关键洞察#

精准依赖追踪：三级映射结构确保属性级依赖收集
异步更新优化：微任务队列合并多次更新
内存安全管理：WeakMap 自动释放无引用对象
嵌套场景处理：effect 栈保持当前执行上下文
分支切换优化：清理旧依赖解决条件分支问题

代码流程#

flowchart TD
    A[reactive创建响应式对象] -->|Proxy代理| B
    subgraph 依赖收集
    B[对象属性访问] --> C[track收集当前effect]
    end
    subgraph 触发更新
    D[对象属性修改] --> E[trigger通知相关effects]
    end
    F[effect注册] --> G[初始化执行]
    G --> H[建立依赖关系]
    E -->|调度| I[执行effect]

代码实现#

1
// 存储副作用函数的桶
2
const bucket = new WeakMap()
3

4
// 当前激活的effect
5
let activeEffect = null
6

7
// effect调用栈
8
const effectStack = []
9

10
// 创建响应式对象
11
function reactive(target) {
12
    return new Proxy(target, {
13
        get(target, key, receiver) {
14
            track(target, key) return Reflect.get(target, key, receiver)
15
        },
16
        set(target, key, value, receiver) {
17
            const oldValue = target[key] const result = Reflect.set(target, key, value, receiver)
18
            // 值变化时才触发更新
19
            if (oldValue !== value) {
20
                trigger(target, key)
21
            }
22
            return result
23
        }
24
    })
25
}
26

27
// 追踪依赖
28
function track(target, key) {
29
    if (!activeEffect) return
30
    // 获取对象的依赖映射
31
    let depsMap = bucket.get(target) if (!depsMap) {
32
        bucket.set(target, (depsMap = new Map()))
33
    }
34
    // 获取属性的依赖集合
35
    let deps = depsMap.get(key) if (!deps) {
36
        depsMap.set(key, (deps = new Set()))
37
    }
38
    // 将当前effect添加到依赖集合
39
    deps.add(activeEffect)
40
    // 将依赖集合添加到effect的deps中（用于清理）
41
    activeEffect.deps.push(deps)
42
}
43

44
// 触发更新
45
function trigger(target, key) {
46
    const depsMap = bucket.get(target) if (!depsMap) return
47
    const effects = depsMap.get(key) if (!effects) return
48
    // 创建新Set避免无限循环
49
    const effectsToRun = new Set() effects.forEach(effectFn = >{
50
        if (effectFn !== activeEffect) {
51
            effectsToRun.add(effectFn)
52
        }
53
    })
54
    // 异步执行更新
55
    queueMicrotask(() = >{
56
        effectsToRun.forEach(effectFn = >{
57
            effectFn()
58
        })
59
    })
60
}
61

62
// 副作用函数
63
function effect(fn) {
64
    const effectFn = () = >{
65
        // 清理旧依赖
66
        cleanup(effectFn)
67
        // 设置当前激活的effect
68
        activeEffect = effectFn effectStack.push(effectFn)
69
        // 执行副作用函数
70
        fn()
71
        // 恢复之前的effect
72
        effectStack.pop() activeEffect = effectStack[effectStack.length - 1]
73
    }
74
    // 存储依赖集合
75
    effectFn.deps = []
76
    // 立即执行
77
    effectFn()
78
    return effectFn
79
}
80

81
// 清理依赖
82
function cleanup(effectFn) {
83
    for (const dep of effectFn.deps) {
84
        dep.delete(effectFn)
85
    }
86
    effectFn.deps.length = 0
87
}

使用示例#

1
// 创建响应式对象
2
const obj = reactive({
3
    count: 0,
4
    text: 'hello'
5
})
6

7
// 注册副作用函数
8
effect(() = >{
9
    console.log(`Count: $ {
10
        obj.count
11
    }`)
12
})
13

14
// 嵌套effect示例
15
effect(() = >{
16
    console.log('Outer effect')
17

18
    effect(() = >{
19
        console.log(`Inner effect: $ {
20
            obj.text
21
        }`)
22
    })
23
})
24

25
// 分支切换示例
26
effect(() = >{
27
    console.log(obj.count > 0 ? obj.text: 'count is zero')
28
})
29

30
// 测试响应式更新
31
obj.count++ // 触发更新
32
obj.text = 'world' // 触发更新
33
// 输出结果：
34
// Count: 0
35
// Outer effect
36
// Inner effect: hello
37
// count is zero
38
//
39
// Count: 1
40
// Inner effect: world
41
// world