（3.1）vue3 手摸手实现mini版reactive.md

专栏前言

​ 在上一节，我们完成了vue3的reactive的核心源码解读，总的来说还是非常复杂，文章的表现能力有限，我想可能有很多同学无法完全理解其精髓，所以在本节，我将带领大家完成mini版本源码的输出。

​ 仅保留最核心逻辑，极大减低阅读难度，200行代码实现reactive + effect，话不多说，我们直接开始！

简易版vue3仓库地址，还请大家不要吝啬star，留个标记，下次迷路~

逻辑图

逻辑流程

reative初始化

​ 将reactive处理为proxy，同时预先声明set get方法，赋值、取值均通过Reflect完成，get中存在track（依赖收集），set中存在trigger（依赖触发），完成reactive的初始化。

effect初始化（依赖收集）

cb = callback = 回调函数 effect(() => {}) // () => {} 就是cb

​ 初始化effect函数，通过一个类ReactiveEffect运行其cb，同时将当前cb存储到公共变量，cb中读取了reactive的属性，进而触发proxy的get，同时完成track（依赖收集），让reative收集到存储在公共变量中的effect的cb，至此完成依赖收集。

重点：reactive - key - effect // 依赖收集完成后，将会形成这样的从上到下的可追溯关系

reactive改变（依赖触发）

​ 若干时间后，reactive属性发生变化，触发reactive属性的赋值操作，进而触发proxy的set事件，同时完成trigger（依赖触发），根据指定的reative + key，找到特定effect运行，完成依赖触发，形成响应式。

重点：reactive + key 找到指定effect，进而完成触发

具体逻辑

proxy处理

​ 经过真实的源码分析之后，我们都知道reactive实际上就是proxy，我们仿照源码的格式，将reactive经过proxy处理后返回就好了。

// 缓存proxy
const reactiveMap = new WeakMap<object, any>()

// 入口函数
export function reactive(target: object) {
  return createReactiveObject(target, mutableHandlers, reactiveMap)
}

// 处理被代理对象
function createReactiveObject(
  target: object,
  baseHandlers: ProxyHandler<object>,
  proxyMap: WeakMap<object, any>
) {
  // 如果已经被代理过,这直接返回结果
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  const proxy = new Proxy(target, baseHandlers)
  proxyMap.set(target, proxy)
  return proxy
}

get set函数编写

​ 以上代码我们完成了变量的proxy处理，为了完成后续的响应式，我们需要预先声明好get set函数，我们依旧仿照源码格式，并只保留核心逻辑，get阶段返回结果，并触发（依赖收集）track，set阶段通过Reflect完成赋值，并触发（依赖触发）trigger

export const mutableHandlers: ProxyHandler<object> = {
  get,
  set,
}

const get = createGetter()
const set = createSetter()

function createGetter() {
  return function get(target: object, key: string, receiver: object) {
    const res = Reflect.get(target, key, receiver)
    // 核心逻辑: 依赖收集
    track(target, key)

    if (isObject(res)) {
      return reactive(res)
    }
    return res
  }
}

function createSetter() {
  return function set(target: object, key: string, newValue: unknown, receiver: object) {
    const res = Reflect.set(target, key, newValue, receiver)
    // 核心逻辑: 依赖触发
    trigger(target, key, newValue)
    return res
  }
}

effect实现

effect的核心的实现，就是在运行effect的时候保存当前的this，以便于后续流程中的依赖收集，所以其核心代码非常简单，保证一下2点即可。

• 运行effect本身
• 保存effect的fn到activeEffect即可

export function effect<T = any>(fn: () => T) {
  const _effect = new ReactiveEffect(fn)
  _effect.run()
}

export let activeEffect: ReactiveEffect | undefined

export class ReactiveEffect<T = any> {
  constructor(public fn: () => T) {}
  run() {
    try {
      activeEffect = this
      return this.fn()
    } finally {
      activeEffect = undefined
    }
  }
}

依赖收集（track）

按照时序，effect函数初始化阶段会执行，effect函数本身也会被保存到activeEffect中，同时触发effect中的reactive中的get事件，进而触发track，我们在track中完成 reactive- key - effect之间关系的构建，确保以后可以在set阶段找到指定的effet的fn即可。

export function track(target: object, key: string) {
  if (!activeEffect) {
    return
  }
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap)
  }
  let dep = depsMap.get(key)
  if (!dep) {
    dep = createDep()
    depsMap.set(key, dep)
  }
  trackEffects(dep)
}

function trackEffects(dep: Dep) {
  dep.add(activeEffect!)
}

依赖触发（trigger）

若干时间后，reative中的某个属性发生了变化，也就会发生set事件，这时候其实就很简单了，我们只需要通过reactive - key找到对应的effect的fn，然后执行即可。

这就形成了我们看到的“响应式”。

export function trigger(target: object, key: string, newValue: unknown) {
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    return
  }
  const dep: Dep | undefined = depsMap.get(key)

  if (!dep) {
    return
  }
  triggerEffects(dep)
}

function triggerEffects(dep: Dep) {
  const effects = [...dep]
  for (const effect of effects) {
    triggerEffect(effect)
  }
}

function triggerEffect(effect: ReactiveEffect) {
  effect.fn()
}

最后

​ 到此为止，我们简易版的reactive + effect的全部源码就完成了，虽然vue3的源码很复杂，但是我们抽丝剥茧，仅保留核心逻辑，大幅降低vue3源码阅读的难度，让绝大多数的前端开发者都可以读懂核心实现~

​ 最后，建议大家clone源码到本地实际运行一下，静下心来一步一步调试，将简易版逻辑弄明白，有兴趣的可以在看看正式的vue3源码，然后在简历上留下浓墨重彩的一笔~