《Vue设计与实现》第四章第四节避免无限递归循环

最新推荐文章于 2025-05-11 15:26:19 发布

原创最新推荐文章于 2025-05-11 15:26:19 发布 · 404 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

17 篇文章

订阅专栏

本文探讨了Vue框架中由于副作用函数导致的无限递归循环问题。当effect函数读取并修改同一个对象的属性时，会导致track和trigger的无限循环。为解决此问题，提出了一种检查策略，即在执行副作用函数时，如果当前执行的函数与待执行的函数相同，则忽略此次执行，从而避免无限递归。

1.《Vue设计与实现》第四章第四节避免无限递归循环

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

上面的代码，会导致无限的递归循环。
因为在这个语句中，既会读取obj.foo的值，又会设置obj.foo的值，而这就是导致问题的根本原因。

首先读取obj.foo的值，这会触发track操作，将当前的副作用函数收集到桶中。
接着将其加1后再赋值给obj.foo，此时会触发trigger操作，即把桶中的副作用函数取出执行。
但问题是该副作用函数正在执行中，还没有执行完毕，就要开始下一次执行。这样就导致了无限递归调用字节。

如何解决
如果trigger触发执行的副作用函数与当前正在执行的副作用函数相同，则不触发执行。

function trigger(target, key) {
	const depsMap = bucket.get(target);
	if (!depsMap) return;
	const effects = depsMap.get(key);
	const effectsToRun = new Set();
	effects && effects.forEach(item => {
		if (item !== activeEffect) {
			effectsToRun.add(item);
		}
	})
	effectsToRun.forEach(item => item());
}