前言

继上一篇文章，我们已经能够实现一个简单的响应系统了，但是仍然存在很多缺陷，本篇文章将具体叙述一下存在的缺陷以及如何解决，最后实现一个较为完善的响应式系统

解决副作用函数硬编码问题

从上一篇文章中我们不难发现响应系统的工作流程大致如下：

1. 当读取操作发生时，将副作用函数收集到“桶”中；
2. 当设置操作发生时，从“桶”中取出副作用函数并执行；

而上一篇文章中我们实现的响应式系统存在硬编码问题，而我们希望的是，哪怕副作用函数是个匿名函数，也能够被正确地收集到“桶”中。

为了实现这个需求，我们需要提供一个用来注册副作用函数的机制，如： 

//用一个全局变量存储被注册的副作用函数
let activeEffect
//effect 函数用于注册副作用函数
function effect(fn){//当调用effect注册副作用函数时，将副作用函数fn赋值给activeEffectactiveEffect=fn//执行副作用函数fn()
}

如上代码，首先，定义了一个全局变量 activeEffect ，初始值是 undefined ，它的作用是存储被注册的副作用函数。接着重新定义了 effect 函数，它变成了一个用来注册副作用函数的函数， effect 函数接收一个参数 fn ，即要注册的副作用函数。

同时需要修改代理函数：

const bucket = new Set()let data = {text:"hello world"}
let obj = new Proxy(data,{get(target,key){//将activeEffect中存储的副作用函数收集到“桶”中if(activeEffect){//将副作用函数effect添加到存储副作用函数的桶中bucket.add(activeEffect)}return target[key]},set(target,key,newVal){target[key]=newVal//把副作用函数从桶中取出来并执行bucket.forEach(fn=>fn())return true}
})

这样我们就解决了副作用函数硬编码的问题，我们可以写一个简单的测试代码来测试一下，如：

effect(()=>{console.log("我是匿名函数")document.body.innerText=obj.text})setTimeout(()=>{obj.text="你好 世界"},1000)

在浏览器中运行上段代码，会发现结果与我们预期的一样。

但是如果我们运行如下代码，猜猜会发生什么：

  effect(()=>{console.log("我是匿名函数")document.body.innerText=obj.text})setTimeout(()=>{//副作用函数中并没有读取abc属性的值obj.abc="你好 世界"},1000)

我们知道，在匿名副作用函数内并没有读取 obj . abc 属性的值，所以理论上，字段 obj . abc 并没有与副作用建立响应联系，因此，定时器内语句的执行不应该触发匿名副作用函数重新执行。但如果我们执行上述这段代码就会发现，定时器到时后，匿名副作用函数却重新执行了，这是不正确的。

导致这个问题的根本原因是，我们没有在副作用函数与被操作的目标字段之间建立明确的联系

我们之前设计的响应系统会在读取属性时，无论读取的是什么属性都会把副作用函数收集到“桶”中，设置属性时，无论设置的是哪一个属性，都会把“桶”中的副作用函数取出来执行；副作用函数与被操作的字段之间没有联系

为了解决这个问题，我们需要重新设计“桶”结构

树形结构的“桶”

树形结构的“桶”可以很好的解决上面的问题

例如我们有这么一段代码：

effect(function fn1(){obj.text1obj.text2
})

那么它们的依赖关系如下：

 又如这段代码：

effect(function fn1(){obj.text
})
effect(function fn2(){obj.text
})

它们的依赖关系如下：

出于性能考虑，我们用WeakMap代替Set作为“桶”的数据结构，然后修改get/set拦截器代码，如下：

//存储副作用函数的桶
const bucket = new WeakMap()//原始数据
let data = {text:"hello world"}
//对原始数据的代理
let obj = new Proxy(data,{//拦截读取操作get(target,key){//没有activeEffect，直接returnif(!activeEffect) return target[key]//根据target从“桶”中取得depsMap，它也是一个Map类型：key => effectslet depsMap=bucket.get(target)//如果不存在depsMap，那么新建一个Map并与target关联if(!depsMap){bucket.set(target,(depsMap=new Map()))}//再根据key从depsMap中取出deps，它是一个Set类型，里面//存储着所有与当前key相关联的副作用函数：effectslet deps=depsMap.get(key)//如果deps不存在，同样新建一个Set并与key相关联if(!deps){depsMap.set(key,(deps=new Set()))}//最后将当前激活的副作用函数添加到桶中deps.add(activeEffect)return target[key]},//拦截设置操作set(target,key,newVal){//设置属性值target[key]=newVal//根据target从“桶”中取出depsMapconst depsMap=bucket.get(target)if(!depsMap)return//根据key从depsMap中取得所有的副作用函数effectsconst effects=depsMap.get(key)//执行副作用函数effects&&effects.forEach(fn=>fn())return true}
})

这样使得get/set拦截器非常复杂，可以将这些代码做一些封装处理，如：

let obj = new Proxy(data,{//拦截读取操作get(target,key){//将副作用函数activeEffect添加到存储副作用函数的桶中track(target,key)//返回属性值return target[key]},//拦截设置操作set(target,key,newVal){//设置属性值target[key]=newVal//把副作用函数从桶中取出来并执行trigger(target,key)//返回true代表设置操作成功return true}})function track(target,key){//没有activeEffect，直接returnif(!activeEffect) return let depsMap=bucket.get(target)if(!depsMap){bucket.set(target,(depsMap=new Map()))}let deps=depsMap.get(key)if(!deps){depsMap.set(key,(deps=new Set()))}//最后将当前激活的副作用函数添加到桶中deps.add(activeEffect)}function trigger(target,key){target[key]=newValconst depsMap=bucket.get(target)if(!depsMap)returnconst effects=depsMap.get(key)effects&&effects.forEach(fn=>fn())}

遗留的副作用函数

上面的代码仍然有问题，比如副作用函数中有一个三元表达式，两个分支分别读取了同一个对象的不同属性，而执行的时候只能用上其中一个，我们需要的是指在执行时用上的那个属性进行副作用函数依赖绑定，也就是修改了那个属性才会触发副作用函数执行而另一个属性修改了不执行，但是我们的代码不管是哪个属性修改了，副作用函数都会执行，显然是不合理的，解决方法为：

let activeEffect;
function effect(fn){const effectFn=()=>{//调用cleanup函数完成清除工作cleanup(effectFn)//当调用effect注册副作用函数时，将副作用函数fn赋值给activeEffectactiveEffect=effectFn//执行副作用函数fn()}//存储所有与该副作用函数有关的依赖集合effectFn.deps=[]effectFn()
}const data={foo:true,bar:true}
let obj = new Proxy(data,{//拦截读取操作get(target,key){//将副作用函数activeEffect添加到存储副作用函数的桶中track(target,key)//返回属性值return target[key]},//拦截设置操作set(target,key,newVal){//设置属性值target[key]=newVal//把副作用函数从桶中取出来并执行trigger(target,key)//返回true代表设置操作成功return true}})
//存储副作用函数的桶
const bucket = new WeakMap()function track(target,key){//没有activeEffect，直接returnif(!activeEffect) return let depsMap=bucket.get(target)if(!depsMap){bucket.set(target,(depsMap=new Map()))}let deps=depsMap.get(key)if(!deps){depsMap.set(key,(deps=new Set()))}//最后将当前激活的副作用函数添加到桶中deps.add(activeEffect)//deps就是一个与当前副作用函数存在关联的依赖集合activeEffect.deps.push(deps)}function trigger(target,key){//target[key]=newValconst depsMap=bucket.get(target)if(!depsMap)returnconst effects=depsMap.get(key)const effectsToRun=new Set(effects)effectsToRun.forEach(effectFn=>effectFn())// effects&&effects.forEach(fn=>fn())}function cleanup(effectFn){for(let i=0;i

  effect(()=>{obj.foo=obj.foo+1})

 function trigger(target,key){// target[key]=newValconst depsMap=bucket.get(target)if(!depsMap)returnconst effects=depsMap.get(key)const effectsToRun=new Set()effects&&effects.forEach(effectFn=>{if(effectFn!==activeEffect){effectsToRun.add(effectFn)}})effectsToRun.forEach(effectFn=>effectFn())// effects&&effects.forEach(fn=>fn())}