fix(reactivity): throw an error during computed self-referencing

[edison1105]

simply demo
make sure switch to version 3.4 DEV mode.(PROD mode causes the browser to crash)

[johnsoncodehk]

I'm skeptical that this use case should be handled, I don't think computed is designed to be used for recursive calculations, and c = computed(() => c.value...) should indeed be infinitely recursive in my opinion.

Even if the special case handles self-referencing, it still doesn't solve the more obscure similar use cases, e.g.:

const c = computed(() => d.value)
const d = computed(() => c.value)

I think we should just ask the user not to do this.

[johnsoncodehk]

I prefer to throw an error for recursive calculations. To catch the above mentioned cases where c and d are accessing each other, or even more complex cases, effect._runnings should be checked instead of activeEffect.

  get value() {
    // the computed ref may get wrapped by other proxies e.g. readonly() #3376
    const self = toRaw(this)
+    if (self.effect._runnings) {
+      throw new Error(`recursive calculations`)
+    }
    if (!self._cacheable || self.effect.dirty) {
      if (hasChanged(self._value, (self._value = self.effect.run()!))) {
        triggerRefValue(self, DirtyLevels.ComputedValueDirty)
      }
    }
    trackRefValue(self)
    return self._value
  }

[yyx990803]

I agree this isn't a realistic use case and the user should never do this. An error is more appropriate.

[edison1105]

@johnsoncodehk done~

[skirtles-code]

Should this PR be updated to point at the main branch?

[edison1105]

the problem is fixed via https://github.com/vuejs/core/pull/10101/files
Not sure if still need to keep this PR 🤔

[yyx990803]

Closing as stale