🚀 深入浅出Vue3响应式原理：从Proxy到依赖收集的完整解析🚀 深入浅出Vue3响应式原理：从Proxy到依赖

🚀 深入浅出Vue3响应式原理：从Proxy到依赖收集的完整解析

很多人认为Vue3的响应式就是简单的Proxy，但这只是冰山一角。真正的响应式系统是一个精妙的架构，涉及Proxy代理、依赖收集、触发更新等多个环节的协同工作。

📋 本文将解答的核心问题

✅ Reactive 的底层实现原理是什么？
✅ WeakMap 与 Map 的区别及其在响应式中的作用
✅ Reflect 为什么要与 Proxy 配合使用？
✅ 依赖收集和触发 的完整机制
✅ 基本数据类型 如何实现响应式？
✅ 为什么 ref 需要通过 .value 访问？

📊 响应式系统全景图

Vue3 响应式系统
├── 对象类型 → reactive()
│   ├── Proxy 代理
│   ├── Reflect 操作
│   └── WeakMap 缓存
└── 基本类型 → ref()
    ├── RefImpl 包装
    ├── .value 访问
    └── 智能类型处理

依赖系统
├── 收集阶段 → track()
│   ├── activeEffect 标记
│   └── targetMap 存储
└── 触发阶段 → trigger()
    ├── 查找依赖
    └── 执行更新

🔑 核心概念速记

概念	作用	关键点
Proxy	对象代理	拦截 get/set 操作
Reflect	正确执行	保证 this 指向
WeakMap	缓存管理	自动垃圾回收
Effect	副作用函数	建立响应式联系
Track	依赖收集	记录数据使用者
Trigger	依赖触发	通知数据变化
RefImpl	基本类型包装	通过访问器实现响应式

💡 最佳实践建议

1. 选择合适的响应式API

// ✅ 对象使用 reactive
const state = reactive({
  user: { name: 'Vue', age: 3 },
  list: [1, 2, 3]
})

// ✅ 基本类型使用 ref
const count = ref(0)
const message = ref('Hello')

// ✅ 需要整体替换的对象使用 ref
const userInfo = ref({ name: 'Vue' })
userInfo.value = { name: 'React' }  // 整体替换

2. 避免常见陷阱

// ❌ 解构会失去响应性
const { name, age } = reactive({ name: 'Vue', age: 3 })

// ✅ 使用 toRefs 保持响应性
const { name, age } = toRefs(reactive({ name: 'Vue', age: 3 }))

// ❌ 忘记 .value
const count = ref(0)
console.log(count)  // RefImpl 对象，不是值

// ✅ 正确访问
console.log(count.value)  // 0

3. 性能优化建议

// ✅ 使用 shallowRef 优化大对象
const bigData = shallowRef({ /* 大量数据 */ })

// ✅ 使用 readonly 防止意外修改
const config = readonly(reactive({ api: 'https://api.example.com' }))

// ✅ 合理使用 computed 缓存计算结果
const expensiveValue = computed(() => {
  return heavyCalculation(state.data)
})

❓ 常见问题解答

Q: 为什么 reactive 不能处理基本类型？ A: Proxy 只能代理对象，无法代理基本类型的值。基本类型是按值传递的，无法建立引用关系。

Q: 为什么 ref 需要 .value？ A: 因为 ref 通过对象的 getter/setter 实现响应式，必须通过属性访问才能触发拦截器。

Q: WeakMap 和 Map 的区别？ A: WeakMap 是弱引用，当原对象被垃圾回收时，WeakMap 中的记录也会自动清除，避免内存泄漏。

Q: 什么时候使用 reactive，什么时候使用 ref？ A:

对象、数组 → reactive
基本类型 → ref
需要整体替换的对象 → ref

🚀 进阶学习建议

深入源码：阅读 Vue3 响应式模块源码，理解更多细节
实践项目：在实际项目中应用这些概念，加深理解
性能调优：学习使用 Vue DevTools 分析响应式性能
扩展学习：了解 computed、watch 等基于响应式系统的高级特性

🎉 结语

Vue3 的响应式系统是一个精心设计的架构，它通过 Proxy、Reflect、依赖收集等技术的巧妙结合，为我们提供了强大而优雅的数据响应能力。

理解这些原理不仅能帮助我们写出更好的 Vue 代码，更能让我们在面试中游刃有余，在实际开发中避免常见陷阱，写出高性能的应用。

记住核心公式：

响应式 = 数据劫持 + 依赖收集 + 派发更新

希望这篇文章能帮助你彻底理解 Vue3 响应式原理！🎯

🔍 一、Reactive 的底层实现原理

💡 快速体验

让我们从一个简单的例子开始理解：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../dist/vue.js"></script>
  </head>
  <body>
    <div id="app1"></div>
    <div id="app2"></div>
    <script>
      const { reactive, effect } = Vue
      const res = reactive({
        name: '123',
        num: 1
      })
      effect(() => {
        document.getElementById('app1').innerHTML = res.name
      })
      effect(() => {
        document.getElementById('app2').innerHTML = res.num
      })
      setTimeout(() => {
        res.name = '456'
        res.num = 2
      }, 4000)
    </script>
  </body>
</html>

这个例子展示了响应式的核心流程：

📦 reactive() 创建响应式对象
👁️ effect() 建立依赖关系
🔄 数据变化时自动更新DOM

🛠️ Reactive 源码解析

下面是简化版的 reactive 实现：

// 引入处理器，用来拦截对象的操作
import { mutableHandler } from './baseHandler'
import { isObject } from '@vue/shared'
// 用WeakMap存储已经变成响应式的对象，避免重复创建
// WeakMap的好处是当原对象被删除时，这里的缓存也会自动清理，不会造成内存泄漏
const reactiveMap = new WeakMap<object, any>()

/**
 * 把普通对象变成响应式对象的函数
 * 就像给对象装上监听器，当对象的属性被读取或修改时能够感知到
 * @param target 要变成响应式的普通对象
 * @returns 响应式对象
 */
export function reactive(target: object) {
  return craeteReactiveObject(target, mutableHandler, reactiveMap)
}

/**
 * 创建响应式对象的核心函数
 * @param target 原始对象
 * @param baseHandler 拦截器，定义如何处理对象的读取、设置等操作
 * @param proxyMap 缓存Map，避免同一个对象被重复处理
 * @returns 响应式代理对象
 */
export function craeteReactiveObject(
  target: object,
  baseHandler: ProxyHandler<any>,
  proxyMap: WeakMap<object, any>
) {
  // 先看看这个对象是不是已经变成响应式了
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    // 如果已经是响应式的，直接返回，不用重复创建
    return existingProxy
  }

  // 用Proxy包装原对象，让它变成响应式的
  // Proxy就像一个中间人，可以拦截对对象的各种操作
  const proxy = new Proxy(target, baseHandler)

  // 把新创建的响应式对象存起来，下次就不用重复创建了
  proxyMap.set(target, proxy)
  return proxy
}

export const toReactive = <T extends unknown>(value: T) => {
  return isObject(value) ? reactive(value as object) : value
}

🔑 核心要点解析

1. WeakMap vs Map 的选择

🎯 WeakMap：弱引用，原对象被删除时自动清理缓存，避免内存泄漏
❌ Map：强引用，不会自动清理，可能导致内存泄漏

2. 实现流程

reactive(obj) → createReactiveObject() → new Proxy(obj, handler)
                     ↓
              检查缓存 → 存在则返回 → 不存在则创建并缓存

🎭 Proxy 处理器详解

baseHandler 是 Proxy 的核心，定义了如何拦截对象操作：

// 引入依赖收集和触发函数
import { track, trigger } from './effect'

// 创建getter和setter函数
const get = createGetter()
const set = createSetter()

/**
 * 创建getter函数的工厂函数
 * getter就是当我们读取对象属性时会调用的函数
 */
function createGetter() {
  return function get(target: object, key: string | symbol, receiver: object) {
    // 先正常获取属性值
    const res = Reflect.get(target, key, receiver)

    // 记录下来：有人读取了这个属性，以后这个属性变化时要通知他
    // 这就是依赖收集，把"谁用了这个数据"记录下来
    track(target, key)

    // 返回属性值
    return res
  }
}

/**
 * 创建setter函数的工厂函数
 * setter就是当我们修改对象属性时会调用的函数
 */
function createSetter() {
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ) {
    // 先正常设置属性值
    const res = Reflect.set(target, key, value, receiver)

    // 通知所有用到这个属性的地方：这个数据变了，你们要更新了！
    // 这就是依赖触发
    trigger(target, key, value)

    // 返回设置结果
    return res
  }
}

/**
 * 响应式对象的处理器
 * 定义了当对响应式对象进行各种操作时应该怎么处理
 */
export const mutableHandler: ProxyHandler<object> = {
  // 当读取属性时调用get
  get,
  // 当设置属性时调用set
  set,
  // 当删除属性时调用deleteProperty
  deleteProperty(target, key) {
    // 正常删除属性
    const res = Reflect.deleteProperty(target, key)
    // TODO: 这里应该也要触发依赖更新，但目前还没实现
    return res
  }
}

🎯 关键操作拦截

GET 操作（读取属性）

get(target, key, receiver) {
  const res = Reflect.get(target, key, receiver)  // 获取值
  track(target, key)                              // 依赖收集
  return res
}

SET 操作（设置属性）

set(target, key, value, receiver) {
  const res = Reflect.set(target, key, value, receiver)  // 设置值
  trigger(target, key, value)                            // 触发更新
  return res
}

🤔 为什么使用 Reflect？

方式	优势	劣势
`target[key]`	简单直接	this 指向可能错误
`Reflect.get()`	正确的 this 指向	稍微复杂

💡 核心总结

Reactive 实现 = Proxy 拦截 + Reflect 操作 + 依赖系统
                   ↓           ↓           ↓
                监听变化    正确执行    收集&触发

🔗 二、依赖收集与触发机制

🎯 核心概念

依赖收集：记录"谁在使用这个数据" 依赖触发：通知"数据变了，该更新了"

📝 实战示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../dist/vue.js"></script>
  </head>
  <body>
    <div id="app1"></div>
    <div id="app2"></div>
    <script>
      const { reactive, effect } = Vue
      const res = reactive({
        name: '123',
        num: 1
      })
      effect(() => {
        document.getElementById('app1').innerHTML = res.name
      })
      effect(() => {
        document.getElementById('app2').innerHTML = res.num
      })
      setTimeout(() => {
        res.name = '456'
        res.num = 2
      }, 4000)
    </script>
  </body>
</html>

在这个例子中：

📊 effect 函数建立了数据与DOM更新的联系
🎯 当 res.name 或 res.num 被读取时，对应的 effect 被收集为依赖
🔄 当数据变化时，相关的 effect 会重新执行

🏗️ Effect 系统架构

// 引入依赖相关的类型和函数
import { ComputedRefImpl } from './computed'
import { createDep, Dep } from './dep'

// 定义一个类型：从属性名到依赖集合的映射
// 比如：{ name: Set([effect1, effect2]), age: Set([effect3]) }
type KeyToDepMap = Map<string | symbol, Dep>

/**
 * 副作用类，用来包装那些需要响应式的函数
 * 比如：当数据变化时，需要重新执行的函数（如更新DOM、重新计算等）
 */
export class ReactiveEffect<T = any> {
  computed?: ComputedRefImpl<T>
  /**
   * 构造函数，接收一个函数作为参数
   * public fn: () => T 这种写法是TypeScript的简写
   * 相当于：
   * public fn: () => T
   * constructor(fn: () => T) {
   *   this.fn = fn
   * }
   */
  constructor(
    public fn: () => T,
    public scheduler?: (effect: ReactiveEffect) => void
  ) {
    this.fn = fn
  }

  /**
   * 运行副作用函数的方法
   * 关键点：运行前先把自己设为当前活跃的effect，这样在函数执行过程中
   * 如果读取了响应式数据，就能知道是谁在读取，从而建立依赖关系
   */
  run() {
    // 告诉全局：现在是我这个effect在运行
    activeEffect = this
    // 执行用户传入的函数，在执行过程中可能会读取响应式数据
    return this.fn()
  }
}

/**
 * 全局的依赖映射表
 * 结构：WeakMap<对象, Map<属性名, Set<副作用函数>>>
 * 比如：WeakMap<{name: '张三'}, Map<'name', Set<[effect1, effect2]>>>
 * 意思是：对象的name属性被effect1和effect2两个副作用函数使用了
 */
const tragetMap = new WeakMap<object, KeyToDepMap>()

/**
 * 当前正在运行的副作用函数
 * 当某个effect在运行时，这个变量就指向它
 * 这样在track函数中就知道是哪个effect在读取数据
 */
export let activeEffect: ReactiveEffect | undefined

/**
 * 依赖收集函数
 * 当响应式数据被读取时调用，记录下"谁在使用这个数据"
 * @param target 被读取的对象
 * @param key 被读取的属性名
 */
export function track(target: object, key: string | symbol) {
  // 如果没有正在运行的effect，就不需要收集依赖
  if (!activeEffect) return

  // 从全局映射表中获取这个对象对应的属性映射
  let depsMap = tragetMap.get(target)

  // 如果这个对象还没有被追踪过，就创建一个新的映射
  if (!depsMap) {
    depsMap = new Map()
    tragetMap.set(target, depsMap)
  }

  // 获取这个属性对应的依赖集合
  let dep = depsMap.get(key)
  if (!dep) {
    // 如果这个属性还没有依赖集合，就创建一个
    dep = createDep()
    depsMap.set(key, dep)
  }

  // 把当前的effect添加到这个属性的依赖集合中
  trackEffects(dep)
}

/**
 * 把当前活跃的effect添加到依赖集合中
 * @param dep 依赖集合
 */
export function trackEffects(dep: Dep) {
  // 把当前正在运行的effect添加到依赖集合中
  // 感叹号(!)表示我们确定activeEffect不是undefined
  dep.add(activeEffect!)
}

/**
 * 依赖触发函数
 * 当响应式数据被修改时调用，通知所有使用了这个数据的地方进行更新
 * @param target 被修改的对象
 * @param key 被修改的属性名
 * @param newValue 新的属性值
 */
export function trigger(target: object, key: string | symbol, newValue: any) {
  console.log('触发依赖')

  // 从全局映射表中获取这个对象的属性映射
  const depsMap = tragetMap.get(target)
  if (!depsMap) return // 如果这个对象没有被追踪，就不需要触发

  // 获取这个属性对应的所有依赖（副作用函数）
  const effects = depsMap.get(key)
  if (effects) {
    // 如果有依赖，就执行所有的副作用函数
    triggerEffects(effects)
  }
}

/**
 * 执行依赖集合中的所有副作用函数
 * @param dep 依赖集合
 */
export function triggerEffects(dep: Dep) {
  // 遍历依赖集合，执行每一个副作用函数
  dep.forEach(effect => {
    triggerEffect(effect)
  })
}

/**
 * 执行单个副作用函数
 * @param effect 要执行的副作用函数
 */
export function triggerEffect(effect: ReactiveEffect) {
  // 调用副作用函数的run方法来执行它
  if (effect.scheduler) {
    effect.scheduler(effect)
  } else {
    effect.run()
  }
}

/**
 * 创建副作用函数的工厂函数
 * 这是用户使用响应式系统的入口函数
 * @param fn 用户传入的函数，当响应式数据变化时会重新执行这个函数
 * @returns 返回创建的ReactiveEffect实例
 *
 * 使用示例：
 * const state = reactive({ count: 0 })
 * effect(() => {
 *   console.log('count is:', state.count) // 当count变化时会重新执行
 * })
 */
export function effect<T = any>(fn: () => T) {
  // 创建一个新的副作用实例
  const _effect = new ReactiveEffect(fn)

  // 立即执行一次，这样可以：
  // 1. 让用户的函数先执行一遍
  // 2. 在执行过程中收集依赖（如果函数里用到了响应式数据）
  _effect.run()

  // 返回副作用实例，用户可以用它来手动控制
  return _effect
}

🗂️ 依赖存储结构

targetMap (WeakMap)
├── target1 (object) → depsMap (Map)
│   ├── 'name' → Set([effect1, effect2])
│   └── 'age'  → Set([effect3])
└── target2 (object) → depsMap (Map)
    └── 'count' → Set([effect4])

⚡ 工作流程

依赖收集流程：

1. effect(() => console.log(obj.name)) 执行
2. 读取 obj.name 触发 get 拦截
3. track(obj, 'name') 被调用
4. 将当前 effect 添加到 obj.name 的依赖集合中

依赖触发流程：

1. obj.name = 'new value' 赋值
2. 触发 set 拦截
3. trigger(obj, 'name') 被调用
4. 找到 obj.name 的所有依赖并执行

💡 核心机制

依赖收集 = 建立"数据 ↔ 副作用"的映射关系
依赖触发 = 根据映射关系执行相关副作用

📦 三、Ref：基本数据类型的响应式方案

🤔 问题背景

Proxy 只能代理对象，那么 string、number、boolean 等基本类型如何实现响应式？

💡 解决方案：包装器模式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../dist/vue.js"></script>
  </head>
  <body>
    <div id="app1"></div>
    <div id="app2"></div>
    <script>
      const { ref, effect } = Vue
      const res = ref('123')
      effect(() => {
        document.getElementById('app1').innerHTML = res.value
      })
      setTimeout(() => {
        res.value = '456'
      }, 2000)
    </script>
  </body>
</html>

🔍 Ref 实现原理

Ref 通过包装器模式解决基本类型响应式问题：

基本类型值 → RefImpl 实例 → .value 属性访问 → getter/setter 拦截

// 引入工具函数和相关模块
import { hasChanged } from '@vue/shared' // 判断值是否发生变化的工具函数
import { Dep } from './dep' // 依赖收集器类型
import { activeEffect, trackEffects, triggerEffects } from './effect' // 副作用相关函数
import { toReactive } from './reactive' // 将对象转为响应式的函数

/**
 * Ref接口定义
 * ref就是一个包装器，把基本类型的值包装成响应式的
 * 比如：let count = ref(0)，这样count.value就是响应式的了
 */
export interface Ref<T = any> {
  value: T // ref的值通过.value来访问
}

/**
 * RefImpl类：ref的具体实现
 * 这个类负责把普通值包装成响应式的ref对象
 */
export class RefImpl<T = any> {
  private _value: T // 存储当前值（可能是响应式的）
  private _rawValue: T // 存储原始值（永远不是响应式的）
  public dep?: Dep = undefined // 依赖收集器，存储使用了这个ref的副作用函数
  public readonly __v_isRef = true // 标记这是一个ref对象

  constructor(value: T, public readonly __v_isShallow: boolean) {
    this._rawValue = value // 保存原始值
    // 如果是浅层ref就直接用原值，否则如果是对象就转成响应式
    this._value = __v_isShallow ? value : toReactive(value)
  }
  /**
   * 当我们访问ref.value时，实际上调用的是这个get方法
   * 比如：console.log(count.value) 就会触发这里
   */
  get value() {
    // 收集依赖：记录下谁在使用这个ref
    trackRefValue(this)
    return this._value
  }

  /**
   * 当我们给ref.value赋值时，实际上调用的是这个set方法
   * 比如：count.value = 10 就会触发这里
   */
  set value(newValue) {
    // 只有值真的变了才需要更新和通知
    if (hasChanged(newValue, this._rawValue)) {
      this._rawValue = newValue // 更新原始值
      this._value = toReactive(newValue) // 如果新值是对象，转成响应式
      triggerRefValue(this) // 通知所有使用了这个ref的地方：值变了，该更新了！
    }

    this._value = newValue
  }
}

/**
 * ref函数：创建一个响应式的ref对象
 * 这是用户最常用的API
 * @param value 要包装的值
 * @returns 响应式的ref对象
 *
 * 使用示例：
 * const count = ref(0)
 * const name = ref('张三')
 * const user = ref({ age: 18 })
 */
export function ref(value: any) {
  return createRef(value, false) // false表示这是深层响应式
}

/**
 * 触发ref的依赖更新
 * 当ref的值发生变化时，通知所有使用了这个ref的副作用函数
 * @param ref 要触发更新的ref对象
 */
export function triggerRefValue(ref: RefImpl | any) {
  if (ref.dep) {
    // 如果有依赖，就执行所有的副作用函数
    triggerEffects(ref.dep)
  }
}

/**
 * 收集ref的依赖
 * 当有副作用函数访问ref.value时，把这个副作用函数记录下来
 * @param ref 要收集依赖的ref对象
 */
export function trackRefValue(ref: RefImpl | any) {
  // 只有在副作用函数运行时才需要收集依赖
  if (activeEffect) {
    // 如果ref还没有依赖收集器，就创建一个
    // 然后把当前的副作用函数添加进去
    trackEffects(ref.dep || (ref.dep = new Set()))
  }
}

/**
 * 创建ref的工厂函数
 * @param rowValue 原始值
 * @param shallow 是否为浅层响应式
 * @returns ref对象
 */
export function createRef(rowValue: any, shallow: boolean) {
  // 如果传入的已经是ref类型，就直接返回，不用重复包装
  if (isRef(rowValue)) {
    return rowValue
  }

  // 创建新的ref实例
  return new RefImpl(rowValue, shallow)
}

/**
 * 判断一个值是否为ref对象
 * @param r 要判断的值
 * @returns 是否为ref
 *
 * 使用示例：
 * const count = ref(0)
 * console.log(isRef(count)) // true
 * console.log(isRef(0)) // false
 */
export function isRef(r: any): r is Ref {
  // 通过检查__v_isRef标记来判断是否为ref
  return !!(r && r.__v_isRef === true)
}

🏗️ RefImpl 核心结构

属性	作用	说明
`_value`	存储当前值	可能是响应式对象
`_rawValue`	存储原始值	永远是原始数据
`dep`	依赖集合	存储相关的 effect

🎯 关键机制

1. 属性访问器

get value() {
  trackRefValue(this)  // 依赖收集
  return this._value
}

set value(newValue) {
  if (hasChanged(newValue, this._rawValue)) {
    this._rawValue = newValue
    this._value = toReactive(newValue)
    triggerRefValue(this)  // 触发更新
  }
}

2. 为什么需要 .value？

// ❌ 基本类型无法直接代理
let count = 0
// 无法拦截对 count 的重新赋值

// ✅ 通过对象属性访问器实现拦截
const count = ref(0)
count.value = 1  // 触发 setter
console.log(count.value)  // 触发 getter

🔄 Ref vs Reactive 对比

特性	Ref	Reactive
适用类型	基本类型 + 对象	仅对象
访问方式	`.value`	直接访问
依赖存储	实例的 `dep`	全局 `targetMap`
实现方式	类 + 访问器	Proxy

🤝 智能处理

// ref 内部会自动判断类型
const str = ref('hello')     // 基本类型 → RefImpl
const obj = ref({name: 'vue'}) // 对象类型 → RefImpl + reactive

💡 核心要点

Ref 的核心 = 包装器模式 + 访问器属性 + 智能类型处理

🎯 四、核心总结与最佳实践