从零实现Vue3的响应式库

最新推荐文章于 2025-10-02 18:59:41 发布

原创最新推荐文章于 2025-10-02 18:59:41 发布 · 590 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

程序员专栏收录该内容

174 篇文章

订阅专栏

本文详细解释了Vue3中如何通过`reactivity`和`Proxy`实现响应式数据管理，介绍了effect的概念，以及如何通过`baseHandlers`、`track`和`trigger`函数收集和执行副作用。同时提到了WeakMap、Set和Reflect在这一过程中的作用。

WeakMap[2]
Set[3]
Reflect[4]
Proxy[5]

上面这些有不了解的同学可以直接点链接查看详细的文档，文章里面就不再解释了。

–

我们首先看一个使用 reactivity 的例子

// 创建一个响应式对象

const state = reactive({ count: 1 })

// 执行effect

effect(() => {

console.log(state.count)

})

state.count = 2 // count改变时执行了effect内的函数，控制台输出2

这个例子通过 reactive 创建了一个响应式对象 state，然后调用 effect 执行函数，这个函数内部访问了 state 的属性，随后我们更改这个 state 的属性，这时，effect 内的函数会再次执行。

这样一个响应式数据的通常实现的方式是这样的

定义一个数据为响应式（通常通过 defineProperty 或者 Proxy 拦截 get、set 等操作）
定义一个副作用函数（effect），这个副作用函数内部访问到响应式数据时会触发 1 中的 getter，进而可以在这里将 effect 收集起来
修改响应式数据时，就会触发 1 中的 setter，进而执行 2 中收集到的 effect 函数

关于 effect：effect 在 Vue 里通常叫做副作用函数，因为这种函数内通常执行组件渲染，计算属性等其他任务。在其他库里面可能叫观察者函数（observe）或其他，个人能理解到是什么意思就好，由于本篇文章是分析 Vue3 的，所以统一叫副作用函数（effect）

根据以上的思路，我们就可以开始动手实现了

reactive

首先我们需要有一个 reactive 函数来将我们的数据变为响应式。

// reactive.ts

import { baseHandlers } from ‘./handlers’

import { isObject } from ‘./utils’

type Target = object

const proxyMap = new WeakMap()

export function reactive(target: T): T {

return createReactiveObject(target)

}

function createReactiveObject(target: Target) {

// 只对对象添加reactive

if (!isObject(target)) {

return target

}

// 不能重复定义响应式数据

if (proxyMap.has(target)) {

return proxyMap.get(target)

}

// 通过Proxy拦截对数据的操作

const proxy = new Proxy(target, baseHandlers)

// 数据添加进ProxyMap中

proxyMap.set(target, proxy)

return proxy

}

这里主要对数据做了简单的判断，关键是在const proxy = new Proxy(target, baseHandlers)中，通过 Proxy 对数据进行处理，这里的baseHandlers就是对数据的 get，set 等拦截操作，下面来实现下baseHandlers

get 收集依赖

首先实现下拦截 get 操作，使得访问数据的某一个 key 时，可以收集到访问这个 key 的函数（effect），并把这个函数储存起来。

// handlers.ts

import { track } from ‘./effect’

import { reactive, Target } from ‘./reactive’

import { isObject } from ‘./utils’

export const baseHandlers: ProxyHandler = {

get(target: Target, key: string | symbol, receiver: object) {

// 收集effect函数

track(target, key)

// 获取返回值

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

// 如果是对象，要再次执行reactive并返回

if (isObject(res)) {

return reactive(res)

}

return res

}

这里我们拦截到 get 操作后，通过 track 收集依赖，track 函数做的事情就是把当前的 effect 函数收集起来，执行完 track 后，再获取到 target 的 key 的值并返回，注意这里是判断了下 res 是否是对象，如果是对象的话要返回reactive(res)，是因为考虑到可能有多个嵌套对象的情况，而 Proxy 只能修改到到当前对象，并不能修改到子对象，所以在这里要处理下，下面我们需要再实现track函数

// effect.ts

// 存储依赖

type Deps = Set

// 通过key去获取依赖，key => Deps

type DepsMap = Map<any, Deps>

// 通过target去获取DepsMap，target => DepsMap

const targetMap = new WeakMap<any, DepsMap>()

// 当前正在执行的effect

let activeEffect: ReactiveEffect | undefined

// 收集依赖

export function track(target: object, key: unknown) {

if (!activeEffect) {

return

}

// 获取到这个target对应的depsMap

let depsMap = targetMap.get(target)

// depsMap不存在时新建一个

if (!depsMap) {

targetMap.set(target, (depsMap = new Map()))

}

// 有了depsMap后，再根据key去获取这个key所对应的deps

let deps = depsMap.get(key)

// 也是不存在时就新建一个

if (!deps) {

depsMap.set(key, (deps = new Set()))

}

// 将activeEffect添加进deps

if (!deps.has(activeEffect)) {

deps.add(activeEffect)

}

注意有两个 map 和一个 set，targetMap => depsMap => deps，这样就可以使我们通过 target 和 key 准确地获取到这个 key 所对应的 deps(effect)，把当前正在执行的 effect（activeEffect）存起来，这样在修改target[key]的时候，就又可以通过 target 和 key 拿到之前收集到的所有的依赖，并执行它们，这里有个问题就是这个activeEffect它是从哪里来的，get 是怎么知道当前正在执行的 effect 的？这个问题可以先放一放，我们后面再将，下面我们先实现这个 set。