vue设计与实现中的cleanup
【vue设计与实现中的cleanup】在vue设计与实现这本书中有一个这样的例子，如下
const data = https://www.it610.com/article/{
ok: true,
text:"hello world
}const obj = new Proxy(data, {...})effect(() => {
document.body.innerHtml = obj.ok ? obj.text : "not";
})在这块代码当中，当obj.ok为true，就会将document.body的值赋值为obj.text的值，也就是说这会触发两个get，分别是obj.ok和obj.text。
当我们将obj.ok赋值为false的时候，会触发这个函数，但是不会进行obj.text的get操作。
我们想要的是当obj.text发生变化的时候，是不会触发这个函数的，但是现在text的deps也对这个函数进行依赖收集，这个时候就需要用到cleanup函数了
cleanup函数的实现思想
我们可以在副作用函数执行的时候，将它从与之相关的依赖集合中进行删除，当副作用函数执行完成后再进行依赖收集
首先，需要将effect函数和track函数进行一些改造
function effect(fn) {
const effectFn = () =>{
cleanup(effectFn)
activeEffect = effectFn
fn()
}
effectFn.deps = []
effectFn()
}function track(target, key) {
if(!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)// 将与effecFn相关联的依赖集合加入到effectFn的deps当中
activeEffect.deps.push(deps)
}在这块代码当中，effectFn函数执行时会进行cleanup操作，再进行fn的执行
而cleanup函数的实现如下
function cleanup(effectFn) {
for(i=0;
i当我们将obj.ok的值改为false时，会进行一次set操作，会将effectFn从ok的deps当中取出来，并执行effectFn，而在effectFn当中，会就执行cleanup函数，将effectFn从相关联的deps中删除掉，然后再执行fn。在执行fn时，这个时候就只会触发obj.ok的get方法，从而将effectFn再次加入到ok的deps当中。
推荐阅读
- html5|（前端知识点）CSS3 新特性与html5 新特性
- 与其说这是一部电影，不如说这是一部艺术品
- Vue|Vue 里，多级菜单要如何设计才显得专业（）
- 【SpringBoot的自动配置--下篇】架构师如何自定义自己的条件注解与自动配置
- vue中formdata传值给后台时参数为空的问题
- 一袖梅香，赠与流光
- go reflect struct (go反射与struct结构体)
- 企业知识管理过程中常见的误区与解决方法
- 自己与他人
- 链得得|【链得得独家】新的加密制裁：美国要求日本切断与俄罗斯一切数字货币相关业务