Vue响应式原理：effect嵌套与同时进行赋值取值操作死循环

2023-11-01 13:31:47

前言

在Vue响应式系统中，effect是一个收集副作用函数的机制，当依赖项发生变化时，effect中的副作用函数会重新执行。在开发过程中，我们经常会遇到effect嵌套的情况，即在一个effect中调用另一个effect。如果在effect嵌套期间同时进行赋值取值操作，可能会导致死循环。

effect嵌套与同时进行赋值取值操作死循环

为了更好地理解effect嵌套与同时进行赋值取值操作死循环问题，我们先来看一个简单的例子：

const reactiveData = ref(1);
const computedValue = computed(() => reactiveData.value * 2);
computedValue.value; // 2
reactiveData.value = 3; // 触发computedValue的重新计算

在这个例子中，computedValue依赖于reactiveData，当reactiveData的值发生变化时，computedValue会重新计算。当我们访问computedValue.value时，会触发computedValue的重新计算。在重新计算过程中，computedValue会访问reactiveData.value，从而导致死循环。

解决方案

为了避免effect嵌套与同时进行赋值取值操作死循环，我们可以使用以下解决方案：

使用watchEffect代替computed

watchEffect是一个与computed类似的API，但它不会在访问其值时触发重新计算。这意味着我们可以在effect嵌套期间使用watchEffect来避免死循环。

const reactiveData = ref(1);
watchEffect(() => {
  const computedValue = reactiveData.value * 2;
  console.log(computedValue);
});
reactiveData.value = 3; // 不会触发重新计算

使用lazy

lazy是一个修饰符，可以使computed在访问其值时才进行计算。这可以防止在effect嵌套期间对computed进行重新计算，从而避免死循环。

const reactiveData = ref(1);
const computedValue = computed(lazy(() => reactiveData.value * 2));
computedValue.value; // 2
reactiveData.value = 3; // 不会触发重新计算