}
这里主要对数据做了简单的判断，关键是在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。
实现 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
}
}
我们在刚才的baseHandlers里面再加一个deleteProperty，它可以拦截到对数据的删除操作，在这里我们需要先判断下删除的 key 是否存在，因为可能用户会删除一个并不存在 key，然后执行删除，我们只在存在 key 并且删除成功时再通知更新，因为如果 key 不存在时，这个删除是无意义的，也就不需要更新，再有就是如果删除操作失败的话，也不需要更新，最后直接触发trigger就可以了，注意这里的第三个参数即 value 是undefined
现在我们已经实现了get，set，deleteProperty这三种操作的拦截，还记不记得在track函数中的activeEffect，那里留了个问题，就是这个activeEffect是怎么来的？，在最开始的例子里面，我们要通过 effect 执行函数，这个activeEffect就是在这里设置的，下面我们来实现下这个effect函数。
// effect.ts
type ReactiveEffect<T = any> = () => T
// 存储effect的调用栈
const effectStack: ReactiveEffect[] = []
export function effect<T = any>(fn: () => T): ReactiveEffect {
// 创建一个effect函数
const effect = createReactiveEffect(fn)
return effect
}
function createReactiveEffect<T = 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 any>(fn: () => T): ReactiveEffect {
const effect = function reactiveEffect() {
// 当前effectStack调用栈不存在这个effect时再执行，避免死循环
if (!effectStack.includes(effect)) {
try {
// 把当前的effectStack添加进effectStack
effectStack.push(effect)
// 设置当前的effect，这样Proxy中的getter就可以访问到了
activeEffect = effect
// 执行函数
return fn()
} finally {
// 执行完后就将当前这个effect出栈
effectStack.pop()
// 把activeEffect恢复
activeEffect = effectStack[effectStack.length - 1]
}
}
} as ReactiveEffect
return effect
}
这里主要是通过createReactiveEffect创建一个 effect 函数，fn 就是调用 effect 时传入的函数，在执行这个 fn 之前，先通过effectStack.push(effect)把这个 effect 推入 effectStack 栈中，因为 effect 可能存在嵌套调用的情况，保存下来就可以获取到一个完整的 effect 调用栈，就可以通过上面的effectStack.includes(effect)判断是否存在循环调用的情况了，然后再activeEffect = effect设置 activeEffect，设置完之后再执行 fn，因为这个 activeEffect 是全局唯一的，所以我们执行 fn 的时候，如果内部访问了响应式数据，就可以在 getter 里拿到这个 activeEffect，进而收集它。
现在基本上是完成了，现在通过我们写的这个 reactivity 库就可以实现例子中的效果了，但是还有一些边界情况需要考虑，下篇文章就添加一些常见的边界情况处理。
参考资料
[1]
