分支切换与cleanup

4. 分支切换与cleanup

了解分支切换，代码示例如下

const data = { ok: true, text: "hello world" };
function reactive(obj) {return new Proxy(obj, {get(target, key) {track(target, key);return target[key];},// 在set操作中，赋值，然后调用effect函数set(target, key, value) {target[key] = value;trigger(target, key);return true;},});
}

const obj = reactive(data);
effect(function effectFn(){document.body.innerText = obj.ok ? obj.text : "not";
}); 

当代码字段obj.ok发生变化时，代码执行的分支会跟着变化，这就是分支切换。

分支切换可能会产生遗留的副作用函数。

上面代码中有个三元运算式，如果obj.ok = true，则展示obj.text，此时，effectFn执行会触发obj.ok和obj.text的读取操作，否则展示"not"

此时的依赖收集如下图展示：

const data = { ok: true, text: "hello world" };
const obj = reactive(data);

effect(function effectFn(){document.body.innerText = obj.ok ? obj.text : "not";
}); 

分支切换导致的问题

当发生obj.ok改变且为false时，此时obj.text对应的依赖effectFn不会执行，

但是obj.text发生改变时，对应的effectFn却会执行，页面的内容会被修改掉。这是不期望发生的！

此时，是key为ok对应的effectFn依旧有效，

key为text对应的effectFn为无效，应该清除掉，如下图展示

如何清除掉副作用函数的无效关联关系？

• 每次副作用函数执行前，可以先把它从所有与之关联的依赖集合中删除，然后清空依赖集合的收集，
• 当副作用函数执行，所有会重新建立关联。（副作用函数中，会重新执行响应式数据的get操作，从而进行收集依赖）

步骤：

1.副作用函数收集与自身关联的依赖集合

1.1.在effect注册副作用函数中为effectFn增添一个属性deps，用来存储依赖集合，2.在track函数中，进行依赖集合的收集

2.将副作用函数从与之关联的所有依赖集合中移除，

1.1.在effect注册副作用函数中，触发副作用函数前，清除副作用函数的依赖集合

疑问：为什么对传入的副作用函数进行一层包裹？

• 为了对副作用函数进行更多操作，

• • 为副作用函数增加deps属性，作为收集依赖集合的容器* 清除副作用函数的依赖集合