fix(reactivity): prevent endless recursion in computed getters

[lehni]

As shared on Twitter with @yyx990803, here the fix for the endless recursion that is sadly very difficult to isolate form our code-base. I will keep trying to create a simple test-case.

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@11797

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@11797

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@11797

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@11797

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@11797

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@11797

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@11797

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@11797

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@11797

vue

pnpm add https://pkg.pr.new/vue@11797

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@11797

commit: 785c471

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB (-32 B)	37.7 kB (-11 B)	33.9 kB (+6 B)
vue.global.prod.js	159 kB (-32 B)	57.6 kB (-7 B)	51.2 kB (+7 B)

Usages

Name	Size	Gzip	Brotli
createApp	55.2 kB (-9 B)	21.2 kB (-7 B)	19.4 kB (-10 B)
createSSRApp	59.2 kB (-9 B)	22.9 kB (-9 B)	20.9 kB (-34 B)
defineCustomElement	59.9 kB (-10 B)	22.8 kB (-9 B)	20.8 kB (+40 B)
overall	68.9 kB (-31 B)	26.3 kB (-5 B)	23.9 kB (-39 B)

[yyx990803]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	❌ failure	❌ failure
nuxt	❌ failure	✅ success
pinia	✅ success	✅ success
primevue	✅ success	✅ success
quasar	✅ success	✅ success
radix-vue	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	✅ success	✅ success
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

[yyx990803]

/ecosystem-ci run nuxt

[vue-bot]

⏳ Triggered ecosystem CI: Open

[yyx990803]

This doesn't seem to break anything but it would be ideal to have a minimal test case so we better understand what kind of usage leads to need of this fix.

[lehni]

@yyx990803 I've been trying to understand the situation that creates such a chain and how to create a simple test-case for it all morning, but have not managed to do so yet. It's very tricky, as I don't unterstand the internals of the reactivity system and the situation only occurs in one place in our complex code-base.

[lehni]

I've finally managed to track this down. I will create a test-case soon, and I also have a simpler fix for this endless recursion than the current one. More to come.

[lehni]

So here's a simplified test-case. It turns out that our code had a rare situation where a computed getter would indirectly reference itself. This is of course bad practise, but it should not lead to endless notify recursions (press the "Step" button to see the bug):

https://play.vuejs.org/#eNp9UstOwzAQ/JWVxQFElRYhLiWtgKoHOACiHC3RkGzbtI5t2etSKcq/YzeP5lBVimTvzmQ0s+uSPWsd7R2yMYttanJNUy7xoJUhyHCVOEFQcgmQJZRc39R3AIPkjGwrgFQ5SWjGMKo7VTiqAZfhTFWhHWE2bvkFWpus8SQHkK/gmja5jRolmEwmMOoRAPrw7e3jCWjMHPFGukMrQGGxL9OwlwtCDVdlX7Vadr+diVEgbVRmuxRKzkSe7vopzlqsRbj0XzzsZuwLwkKLhNBXAPGvI1ISntIgOuGskedsGpzGwxqvuXpalu0Uoariofb9eNgTZANGNlVyla+jrVXS7/fokrOwjVyg+dCUK2k56wJxlgih/t6OPTIOffC6n24w3Z3pb+0h9Dj7NGjR7JGzDqPErJFqeL54x4O/d2ChMic8+wL4hVYJFzzWtBcnM2+7xzu6fS3CW83l+tvOD4TStqGC0XZ9ge0f+exC9JPd++ih3Zif4s8eTdD0A/RAdMeqf3e7Boc=

The same code used to work in 3.4.11:

https://play.vuejs.org/#eNp9UstOwzAQ/JWVxQEESkGFS0kroOoBDoAoR0s0JNs2rWNb9rpUivLv2M2jOVSVItm7MxnN7Lpkz1pHO4dsxGKbmlzThEvca2UIMlwmThCUXAJkCSWXV/UdwCA5I9sKIFVOEpoR3NadKhzVDZfhTFWhHWE2avkFWpus8CgHkC/hkta5jRolGI/HcNsjAPTh6+vHI9CYOeCNdIdWgMJiX6ZhL+aEGi7Kvmq16H47EaNAWqvMdimUnIo83fZTnLRYi3Dpv3jQzdgXhIUWCaGvAOJfR6QkPKVBdMxZI8/ZJDiNBzVec/WkLNspQlXFA+378aAnyG4Y2VTJZb6KNlZJv9+DS87CNnKB5kNTrqTlrAvEWSKE+ns79Mg49MHrfrrGdHuiv7H70OPs06BFs0POOowSs0Kq4dn8Hff+3oGFypzw7DPgF1olXPBY016czLztHu/g9rUIbzWXq2872xNK24YKRtv1BbZ/5NMz0Y92h9FDuzE/xZ8dmqDpBziM7qO7O1b9A34wBrc=

[lehni]

I have added a simpler fix for this situation along with a proper test in 785c471

@yyx990803 I look forward to hearing your thoughts on this.

[lehni]

It's a bit strange that no value is returned from the first use of the getter. One could argue that the behavior of v3.4.15 is actually the correct one in this situation?

https://play.vuejs.org/#eNp9UstOwzAQ/JWVxQEESkHQS0kroOoBDoAoR0s0JNs2rWNb9rpUivLv2M2jOVSVItm7MxnN7Lpkz1pHO4dsxGKbmlzThEvca2UIMlwmThCUXAJkCSWXV/UdwCA5I9sKIFVOEpoR3NadKhzVDZfhTFWhHWE2avkFWpus8CgHkC/hkta5jRolGI/HcNsjAPTh6+vHI9CYOeCNdIdWgMJiX6ZhL+aEGi7Kvmq16H47EaNAWqvMdimUnIo83fZTnLRYi3Dpv3jQzdgXhIUWCaGvAOJfR6QkPKVBdMxZI8/ZJDiNBzVec/WkLNspQlXFA+378aAnyG4Y2VTJZb6KNlZJv9+DS87CNnKB5kNTrqTlrAvEWSKE+ns79Mg49MHrfrrGdHuiv7H70OPs06BFs0POOowSs0Kq4dn8Hff+3oGFypzw7DPgF1olXPBY016czLztHu/g9rUIbzWXq2872xNK24YKRtv1BbZ/5NMz0Y9276NhuzE/xZ8dmqDpB3gfPUR3Q1b9A348Brs=

[yyx990803]

@lehni that is indeed another behavior change from 3.4. I will address it in a separate commit.

[lehni]

@yyx990803 amazing, thank you for working on this so swiftly!

[onlime]

Great @lehni & @yyx990803 Thanks for the fast fix! The endless recursion also occurred in floating-vue tooltips, fixed with Vue 3.5.2

[charlesg99]

Why was this reverted? 3.5.2 fixed it and today 3.5.3 broke it again.

[lehni]

@charlesg99 are you saying you're seeing an endless recursion again?

For what it's worth, this fix here wasn't reverted, it's the follow up commit e84c4a6 by @yyx990803 that was reverted.

[charlesg99]

@charlesg99 are you saying you're seeing an endless recursion again?

For what it's worth, this fix here wasn't reverted, it's the follow up commit e84c4a6 by @yyx990803 that was reverted.

The reverted commit references your comment here and not a separate issue, so I'm commenting here :)

[lehni]

Ok understood. Could you create a new issue with a test-case illustrating your bug?

[charlesg99]

It's a bit strange that no value is returned from the first use of the getter. One could argue that the behavior of v3.4.15 is actually the correct one in this situation?

https://play.vuejs.org/#eNp9UstOwzAQ/JWVxQEESkHQS0kroOoBDoAoR0s0JNs2rWNb9rpUivLv2M2jOVSVItm7MxnN7Lpkz1pHO4dsxGKbmlzThEvca2UIMlwmThCUXAJkCSWXV/UdwCA5I9sKIFVOEpoR3NadKhzVDZfhTFWhHWE2avkFWpus8CgHkC/hkta5jRolGI/HcNsjAPTh6+vHI9CYOeCNdIdWgMJiX6ZhL+aEGi7Kvmq16H47EaNAWqvMdimUnIo83fZTnLRYi3Dpv3jQzdgXhIUWCaGvAOJfR6QkPKVBdMxZI8/ZJDiNBzVec/WkLNspQlXFA+378aAnyG4Y2VTJZb6KNlZJv9+DS87CNnKB5kNTrqTlrAvEWSKE+ns79Mg49MHrfrrGdHuiv7H70OPs06BFs0POOowSs0Kq4dn8Hff+3oGFypzw7DPgF1olXPBY016czLztHu/g9rUIbzWXq2872xNK24YKRtv1BbZ/5NMz0Y9276NhuzE/xZ8dmqDpB3gfPUR3Q1b9A348Brs=

@lehni
Here you go, using your test case from the comment referenced in the commit that was reverted! Try version 3.5.2, then 3.5.3.

[yyx990803]

Self-referencing computed is an anti-pattern. The behavior is not strictly defined and has fluctuated between versions in the past. If a change "fixes" a behavior for an anti-pattern but breaks other idiomatic usage, it will be reverted.

[lehni]

@yyx990803 fully agreeing with you here. But I'd like to point out that the change did not break other idiomatic usage. What I pointed out was another anti-pattern that it broke, leading to its reversal. I still think that leaving this change in would have been the better choice.

[yyx990803]

@lehni ok in that case we should re-revert it then 😅

[lehni]

I'm ok with that if you are and no new issues come out of the woodwork because of it 😅

[charlesg99]

Thank you! Of course the real app is more complex and doesn't have a self referencing computed (directly that is, probably internally with object proxies or something). The computed causing problem with 3.5.3 uses a bunch of other computed and is passed throught props and such, so hard to pinpoint the exact cause and create a simple repro.

All I know is that this piece of code is 4 years old (originally Vue version 2, now version 3) and has worked fine till version 3.5 broke production. So "something" changed that has worked the last 4 years :)