从零实现Vue3的响应式库

})

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

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

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

1. 定义一个数据为响应式（通常通过 defineProperty 或者 Proxy 拦截 get、set 等操作）

2. 定义一个副作用函数（effect），这个副作用函数内部访问到响应式数据时会触发 1 中的 getter，进而可以在这里将 effect 收集起来

3. 修改响应式数据时，就会触发 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 (isObje

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

ct(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。

实现 set

// handlers.ts

export const baseHandlers: ProxyHandler = {

get() {

//…

},

set(target: Target, key: string | symbol, value: any, receiver: object) {

// 设置value

const result = Reflect.set(target, key, value, receiver)

// 通知更新

trigger(target, key, value)

return result

}

}

我们在刚才的baseHandlers下面再加一个 set，这个 set 里面主要就是赋值然后通知更新，通知更新通过trigger进行，我们需要拿到在 get 中收集到的依赖，并执行，下面来实现下 trigger 函数

// effect.ts

// 通知更新

export function trigger(target: object, key: any, newValue?: any) {

// 获取该对象的depsMap

const depsMap = targetMap.get(target)

// 获取不到时说明没有触发过getter

if (!depsMap) {

return

}

// 然后根据key获取deps，也就是之前存的effect函数

const effects = depsMap.get(key)

// 执行所有的effect函数

if (effects) {

effects.forEach((effect) => {

effect()

})

}

}

这个 trigger 就是获取到之前收集的 effect 然后执行。

其实除了 get 和 set，还有个常用的操作，就是删除属性，现在我们还不能拦截到删除操作，下面我们来实现下

实现 deleteProperty

export const baseHandlers: ProxyHandler = {

get() {

//…

},

set() {

//…

},

deleteProperty(target: Target, key: string | symbol) {

// 判断要删除的key是否存在

const hadKey = hasOwn(target, key)

// 执行删除操作

const result = Reflect.deleteProperty(target, key)

// 只在存在key并且删除成功时再通知更新

if (hadKey && result) {

trigger(target, key, undefined)

}

return result

}

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。