Vue 3 Reactive 响应式原理深度解析

为什么对象需要 Proxy 代理？#

对象响应式的挑战#

与原始值不同，对象本身可以被拦截，但 Vue 需要解决更复杂的问题：

1
// 对象的多种操作需要被拦截
2
const obj = { count: 0, user: { name: 'vue' } }
3

4
// 1. 属性读取
5
console.log(obj.count)           // 需要依赖收集
6
console.log(obj.user.name)       // 嵌套对象也需要响应式
7

8
// 2. 属性设置
9
obj.count = 10                   // 需要触发更新
10
obj.user.name = 'react'          // 嵌套属性修改也需要响应式
11

12
// 3. 属性删除
13
delete obj.count                 // 需要触发更新
14

15
// 4. 属性枚举
16
for (let key in obj) {}          // 需要建立依赖关系
17

18
// 5. 动态属性添加
19
obj.newProp = 'value'            // 需要触发更新

核心挑战：对象操作种类繁多，需要全面拦截各种操作类型。

ReactiveEffect 类的内部实现#

Vue 3 使用 ReactiveEffect 类管理副作用函数：

1
class ReactiveEffect {
2
  constructor(fn, scheduler = null) {
3
    this.fn = fn                    // 副作用函数
4
    this.scheduler = scheduler      // 调度器（用于批量更新）
5
    this.active = true             // 是否激活
6
    this.deps = []                 // 该effect依赖的响应式数据集合
7
    this._trackId = 0              // 用于依赖清理的追踪ID
8
    this._depsLength = 0           // 依赖数量
9
  }
10

11
  run() {
12
    if (!this.active) {
13
      return this.fn()
14
    }
15

16
    let parent = activeEffect
17
    let lastShouldTrack = shouldTrack
18

19
    try {
20
      // 设置当前effect为活跃状态
21
      activeEffect = this
22
      shouldTrack = true
23

24
      // 清理旧依赖
25
      this.cleanupEffect()
26

27
      // 执行副作用函数，过程中会收集新依赖
28
      return this.fn()
29
    } finally {
30
      // 恢复上一个effect
31
      activeEffect = parent
32
      shouldTrack = lastShouldTrack
33
    }
34
  }
35

36
  stop() {
37
    if (this.active) {
38
      this.cleanupEffect()
39
      this.active = false
40
    }
41
  }
42

43
  cleanupEffect() {
44
    // 从所有依赖的响应式数据中移除当前effect
45
    for (let i = 0; i < this.deps.length; i++) {
46
      this.deps[i].delete(this)
47
    }
48
    this.deps.length = 0
49
  }
50
}

Proxy 处理器的完整实现#

Vue 3 的 reactive() 基于 Proxy 实现，需要处理多种操作：

1
const baseHandlers = {
2
  // 属性读取拦截
3
  get(target, key, receiver) {
4
    // 特殊key处理
5
    if (key === ReactiveFlags.IS_REACTIVE) return true
6
    if (key === ReactiveFlags.RAW) return target
7

8
    const res = Reflect.get(target, key, receiver)
9

10
    // 依赖收集
11
    track(target, TrackOpTypes.GET, key)
12

13
    // 如果是对象，递归创建响应式代理
14
    if (isObject(res)) {
15
      return reactive(res)
16
    }
17

18
    return res
19
  },
20

21
  // 属性设置拦截
22
  set(target, key, value, receiver) {
23
    let oldValue = target[key]
24

25
    // 判断是新增还是修改
26
    const hadKey = hasOwn(target, key)
27
    const result = Reflect.set(target, key, value, receiver)
28

29
    // 避免触发原型链上的setter
30
    if (target === toRaw(receiver)) {
31
      if (!hadKey) {
32
        // 新增属性
33
        trigger(target, TriggerOpTypes.ADD, key, value)
34
      } else if (hasChanged(value, oldValue)) {
35
        // 修改属性
36
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
37
      }
38
    }
39

40
    return result
41
  },
42

43
  // 属性删除拦截
44
  deleteProperty(target, key) {
45
    const hadKey = hasOwn(target, key)
46
    const oldValue = target[key]
47
    const result = Reflect.deleteProperty(target, key)
48

49
    if (result && hadKey) {
50
      trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
51
    }
52

53
    return result
54
  },
55

56
  // 属性存在性检查拦截
57
  has(target, key) {
58
    const result = Reflect.has(target, key)
59
    if (!isSymbol(key) || !builtInSymbols.has(key)) {
60
      track(target, TrackOpTypes.HAS, key)
61
    }
62
    return result
63
  },
64

65
  // 属性枚举拦截
66
  ownKeys(target) {
67
    track(target, TrackOpTypes.ITERATE, isArray(target) ? 'length' : ITERATE_KEY)
68
    return Reflect.ownKeys(target)
69
  }
70
}

数组特殊处理#

数组需要特殊的响应式处理：

1
const arrayInstrumentations = {}
2

3
// 重写数组的变异方法
4
;['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(key => {
5
  arrayInstrumentations[key] = function (...args) {
6
    // 暂停依赖收集，避免无限递归
7
    pauseTracking()
8

9
    // 调用原始方法
10
    const res = Array.prototype[key].apply(this, args)
11

12
    // 恢复依赖收集
13
    resetTracking()
14

15
    return res
16
  }
17
})
18

19
// 重写数组的查找方法，确保响应式对象的正确比较
20
;['includes', 'indexOf', 'lastIndexOf'].forEach(key => {
21
  arrayInstrumentations[key] = function (...args) {
22
    const arr = toRaw(this)
23

24
    // 建立对数组每个元素的依赖
25
    for (let i = 0, l = this.length; i < l; i++) {
26
      track(arr, TrackOpTypes.GET, i + '')
27
    }
28

29
    // 先用原始参数查找
30
    const res = arr[key](...args)
31
    if (res === -1 || res === false) {
32
      // 如果没找到，尝试用原始值查找
33
      return arr[key](...args.map(toRaw))
34
    } else {
35
      return res
36
    }
37
  }
38
})

深度响应式机制#

递归代理的实现#

1
function createReactiveObject(target, baseHandlers, collectionHandlers, proxyMap) {
2
  // 如果已经是代理对象，直接返回
3
  if (target[ReactiveFlags.RAW] && !(isReadonly && target[ReactiveFlags.IS_REACTIVE])) {
4
    return target
5
  }
6

7
  // 如果已经有对应的代理，返回缓存的代理
8
  const existingProxy = proxyMap.get(target)
9
  if (existingProxy) {
10
    return existingProxy
11
  }
12

13
  // 创建新的代理对象
14
  const proxy = new Proxy(
15
    target,
16
    isCollectionType(target) ? collectionHandlers : baseHandlers
17
  )
18

19
  // 缓存代理对象
20
  proxyMap.set(target, proxy)
21
  return proxy
22
}
23

24
// 递归响应式示例
25
const state = reactive({
26
  user: {
27
    profile: {
28
      name: 'vue',
29
      settings: {
30
        theme: 'dark'
31
      }
32
    }
33
  }
34
})
35

36
// 访问深层属性时的内部流程：
37
// 1. state.user -> get拦截器 -> track(state, 'user') -> 返回 reactive(userObj)
38
// 2. userProxy.profile -> get拦截器 -> track(userObj, 'profile') -> 返回 reactive(profileObj)
39
// 3. profileProxy.name -> get拦截器 -> track(profileObj, 'name') -> 返回 'vue'

集合类型的特殊处理#

Map、Set、WeakMap、WeakSet 需要特殊的响应式处理：

1
const collectionHandlers = {
2
  get: createInstrumentationGetter(false, false)
3
}
4

5
function createInstrumentationGetter(isReadonly, shallow) {
6
  const instrumentations = shallow
7
    ? shallowInstrumentations
8
    : isReadonly
9
    ? readonlyInstrumentations
10
    : mutableInstrumentations
11

12
  return (target, key, receiver) => {
13
    if (key === ReactiveFlags.IS_REACTIVE) {
14
      return !isReadonly
15
    }
16

17
    return Reflect.get(
18
      hasOwn(instrumentations, key) && key in target
19
        ? instrumentations
20
        : target,
21
      key,
22
      receiver
23
    )
24
  }
25
}
26

27
// Map/Set 方法的响应式包装
28
const mutableInstrumentations = {
29
  get(key) {
30
    return get(this, key)
31
  },
32

33
  set(key, value) {
34
    return set.call(this, key, value)
35
  },
36

37
  delete(key) {
38
    return deleteEntry.call(this, key)
39
  },
40

41
  clear() {
42
    return clear.call(this)
43
  },
44

45
  forEach: createForEach(false, false)
46
}
47

48
function get(target, key) {
49
  target = toRaw(target)
50
  const rawKey = toRaw(key)
51

52
  if (key !== rawKey) {
53
    track(target, TrackOpTypes.GET, key)
54
  }
55
  track(target, TrackOpTypes.GET, rawKey)
56

57
  const { has } = getProto(target)
58
  const wrap = isShallow ? toShallow : toReactive
59

60
  if (has.call(target, key)) {
61
    return wrap(target.get(key))
62
  } else if (has.call(target, rawKey)) {
63
    return wrap(target.get(rawKey))
64
  }
65
}

性能优化策略#

1. 代理缓存机制#

1
// 全局代理缓存
2
const reactiveMap = new WeakMap()
3
const shallowReactiveMap = new WeakMap()
4
const readonlyMap = new WeakMap()
5
const shallowReadonlyMap = new WeakMap()
6

7
function reactive(target) {
8
  // 如果是只读对象，直接返回
9
  if (isReadonly(target)) {
10
    return target
11
  }
12

13
  return createReactiveObject(
14
    target,
15
    false,  // isReadonly
16
    false,  // isShallow
17
    reactiveMap
18
  )
19
}
20

21
// 缓存避免重复代理
22
const obj = { count: 0 }
23
const proxy1 = reactive(obj)  // 创建新代理，缓存到 reactiveMap
24
const proxy2 = reactive(obj)  // 从缓存返回，proxy1 === proxy2

2. 依赖收集优化#

1
// 避免重复收集的优化
2
let shouldTrack = true
3
const trackStack = []
4

5
export function pauseTracking() {
6
  trackStack.push(shouldTrack)
7
  shouldTrack = false
8
}
9

10
export function enableTracking() {
11
  trackStack.push(shouldTrack)
12
  shouldTrack = true
13
}
14

15
export function resetTracking() {
16
  const last = trackStack.pop()
17
  shouldTrack = last === undefined ? true : last
18
}
19

20
// 使用示例
21
function expensiveOperation() {
22
  pauseTracking()           // 暂停依赖收集
23

24
  // 大量响应式数据访问，但不需要建立依赖
25
  for (let i = 0; i < 10000; i++) {
26
    someReactiveData.value++
27
  }
28

29
  resetTracking()           // 恢复依赖收集
30
}

3. 批量更新机制#

1
const queue = []
2
let isFlushing = false
3
let isFlushPending = false
4

5
function queueJob(job) {
6
  if (!queue.includes(job)) {
7
    queue.push(job)
8
  }
9
  queueFlush()
10
}
11

12
function queueFlush() {
13
  if (!isFlushing && !isFlushPending) {
14
    isFlushPending = true
15
    // 使用微任务批量执行更新
16
    Promise.resolve().then(flushJobs)
17
  }
18
}
19

20
function flushJobs() {
21
  isFlushPending = false
22
  isFlushing = true
23

24
  // 按优先级排序
25
  queue.sort((a, b) => getId(a) - getId(b))
26

27
  try {
28
    for (let i = 0; i < queue.length; i++) {
29
      queue[i]()
30
    }
31
  } finally {
32
    queue.length = 0
33
    isFlushing = false
34
  }
35
}

reactive 与 ref 的对比#

适用场景对比#

1
// 1. 原始值 - 只能用 ref
2
const count = ref(0)
3
const message = ref('hello')
4
const isLoading = ref(false)
5

6
// 2. 对象 - 两种方式都可以
7
const userRef = ref({ name: 'vue', age: 3 })
8
const userReactive = reactive({ name: 'vue', age: 3 })
9

10
// 访问方式不同
11
console.log(userRef.value.name)      // 需要 .value
12
console.log(userReactive.name)       // 直接访问
13

14
// 3. 数组 - 推荐使用 reactive
15
const listRef = ref([1, 2, 3])
16
const listReactive = reactive([1, 2, 3])
17

18
listRef.value.push(4)                // 需要 .value
19
listReactive.push(4)                 // 直接操作

内部实现差异#

1
// ref 的结构
2
const refValue = ref({ count: 0 })
3
/*
4
RefImpl {
5
  _value: Proxy({ count: 0 }),    // 内部用 reactive 包装对象
6
  _rawValue: { count: 0 },        // 原始值
7
  __v_isRef: true,                // ref 标识
8
  dep: Set(),                     // 依赖收集器
9
  get value() { ... },            // 单一入口
10
  set value(val) { ... }
11
}
12
*/
13

14
// reactive 的结构
15
const reactiveValue = reactive({ count: 0 })
16
/*
17
Proxy {
18
  [[Handler]]: baseHandlers,      // Proxy 处理器
19
  [[Target]]: { count: 0 },       // 原始对象
20
  // 每个属性都有独立的依赖收集
21
}
22
*/

性能特征对比#

1
function performanceComparison() {
2
  const iterations = 100000
3

4
  // ref 访问嵌套属性
5
  const refData = ref({ a: { b: { c: 1 } } })
6
  console.time('ref nested access')
7
  for (let i = 0; i < iterations; i++) {
8
    const val = refData.value.a.b.c  // .value + 三次属性访问
9
  }
10
  console.timeEnd('ref nested access')  // ~120ms
11

12
  // reactive 访问嵌套属性
13
  const reactiveData = reactive({ a: { b: { c: 1 } } })
14
  console.time('reactive nested access')
15
  for (let i = 0; i < iterations; i++) {
16
    const val = reactiveData.a.b.c   // 三次代理拦截
17
  }
18
  console.timeEnd('reactive nested access')  // ~100ms
19
}
20

21
// 性能总结：
22
// - ref: 单一依赖入口，但访问对象属性需要 .value
23
// - reactive: 每个属性独立依赖，更精细的更新控制

使用建议#

1
// ✅ 推荐用法
2
const count = ref(0)                    // 原始值用 ref
3
const user = reactive({                 // 对象用 reactive
4
  name: 'vue',
5
  profile: { age: 3 }
6
})
7

8
// ❌ 不推荐用法
9
const countObj = reactive({ value: 0 }) // 原始值包装成对象用 reactive
10
const userRef = ref({                   // 对象用 ref（需要 .value）
11
  name: 'vue',
12
  profile: { age: 3 }
13
})
14

15
// 🤔 特殊场景
16
const data = ref(null)                  // 初始值为 null，后续可能是对象
17
// data.value = { user: 'info' }       // 动态赋值不同类型

总结#

reactive 的核心特点#

Proxy 代理：拦截对象的所有操作类型（get、set、delete、has、ownKeys）
深度响应式：自动递归处理嵌套对象
精细依赖收集：每个属性独立收集依赖
特殊类型支持：Map、Set、WeakMap、WeakSet 的专门处理

设计优势#

操作拦截全面：相比 Vue 2 的 Object.defineProperty，Proxy 能拦截更多操作
动态属性支持：新增/删除属性都能被响应式系统感知
更好的数组支持：不需要特殊处理数组的变异方法
集合类型支持：原生支持 Map、Set 等集合类型

关键理解#

reactive 解决了对象的全面响应式拦截问题
通过 Proxy 代理，实现了对对象操作的完整控制
与 ref 形成互补，提供了完整的响应式解决方案
性能优化通过缓存、批量更新等机制保证了实用性

reactive 系统是 Vue 3 响应式架构的另一重要支柱，与 ref 共同构建了强大而灵活的响应式生态。