Reactive fail on 3.4.13

[mrquokka]

Vue version

3.4.13

Link to minimal reproduction

https://play.vuejs.org/#eNqVVU1v2zAM/SucL02BxMaQnbK26Db0sB22YestLgLFZhK1tuxJdJoiyH8fZfk7SbvlEFvkE/nIR8l771Oe+9sCvZl3RZjmiSC8CRXAVSy3ECXCmOvQwz+FzFNUtMi2qLcSn0OvRDGu3gXbiVwxdiUSg6076EXt45GRldklrN+BnatMc7RRrrMcNb0sYjTRGJqlEileglSAsaQFg9OF9ZnQa4PMnvCFY/T29PwkKcEuwiaZX5Tmi4cW2pB8sy+LRCwxCT0uYENpchy79NvYELSlBxz0dMNqV8/MSxNpmRMkQq05B3HZpR13eaYJYlyJIiHY2xCxIDG6dO8AGqnQql4BRCLa4IK0UIajy0yZGewPIAzsYc79m4EhLdX6gc0c1+VlWG0fd41lh2sPHOAwdmkOH+3TrVKkTRbbLM63RuqmLwXvxWmoA8gVjN61CCs/baTxj4u47OyCc6B5E+kBrrt4blq30gvf9y+qUo7cFdchxpXsfgbpXqaYFTRiIa5v+qn+n9yQnlhGfXonCR6huhQPl83iUL9Uo/I2v2qr09f9R1maF4RxI/PgmLYDabHKEGczPLJ2yo7Grjwz7cCVx7M7ZbY/bTEuXMPOsHceeiL0xhB6S/eIQq9mDcCsYDTYBdmqE6I3TA7ZaQUnKHt0dpLb3tqm2jJfEbcqthPIH4rZU7Hqxhn8yYkcKuw4HaloN1wFLhTfLt7Yk6m9XiapyP1Hkyn+aJTUw8rBt1Cjd+jxV8WuQ29DlJtZEESx4m0xJnKrfYUUqDwNbhkW6EIRH5BJnKW3U/+D/37K156hrt1Hk06WOns2qDkKy9jJE7CRL+CJRhWjRv2veQfberkHvqP8ZZe4SdwWMjwTK7keNMWeAZmg/lEq0W+OSJLs+VtpI13UivKeDUZPJ+yPZueK+sliWWadBpDQPHrOfff7O+74vXGmWVwklRBnnL/QZElhOTrY50LFTLuDK9l+LTXmI3dv7naEytRFWaLtyS8F+fJK6S3dqT9tunj4Cw/kyKI=

Steps to reproduce

Just run on 3.4.13

What is expected?

Work

What is actually happening?

... instead of translaton

System Info

No response

Any additional comments?

No response

[yyx990803]

/cc @johnsoncodehk

[yyx990803]

Simplified reproduction:

https://play.vuejs.org/#eNp9kU9Pg0AQxb/KuBcgQWrtraFN1PSgBzXa414Qpu1W2N3sn9qE8N2dBWl7MD3Bzvu94T22ZQ9aZwePbM5yWxqhHVh0Xi+5FI1WxkELBovSiQOmUKpGe4cVdLAxqoGInBGXAFyWSlryusIhLE6WuO0SLke1JGVcEccJLJbQBrfYQHwTR0UEQg4rkmR4ZgVZpoExlMr8qVnB5bCXsq5Fg8q7y31n6z2BKUzvCM4nQz9qRgeHja6JohNA21K0roP8FuxO+bqCLwzWfHKBsZQ5Sz02YpvtrZL0x/qPcRYqiRrNm3aCenI2H2IErahr9fPSz5zxmI7zcofl9z/zvT2GGWfvBi2aA3J20lxhtugGefX5ikd6P4mNqnxN9BXxA62qfcg4YI9eVhT7guvTPvf3LuR2bVdHh9KOpULQQHY9zxld/tOV6ue4s2zW++gyWPcLDLbORw==

[LinusBorg]

@yyx990803 Is that problem reproducible without a side-effect in the computed (or in render)? I can't find a way, at least.

If it's not, then as a theoretical question: Should we really support that? Or is it that we don't want to but need to support it to keep backwards compat for something that worked even though it has always been a discouraged practice?

[yyx990803]

This is indeed discouraged usage, but this is a regression nonetheless and should ideally be fixed.

[Doctor-wu]

Simplified reproduction:

https://play.vuejs.org/#eNp9kU9Pg0AQxb/KuBcgQWrtraFN1PSgBzXa414Qpu1W2N3sn9qE8N2dBWl7MD3Bzvu94T22ZQ9aZwePbM5yWxqhHVh0Xi+5FI1WxkELBovSiQOmUKpGe4cVdLAxqoGInBGXAFyWSlryusIhLE6WuO0SLke1JGVcEccJLJbQBrfYQHwTR0UEQg4rkmR4ZgVZpoExlMr8qVnB5bCXsq5Fg8q7y31n6z2BKUzvCM4nQz9qRgeHja6JohNA21K0roP8FuxO+bqCLwzWfHKBsZQ5Sz02YpvtrZL0x/qPcRYqiRrNm3aCenI2H2IErahr9fPSz5zxmI7zcofl9z/zvT2GGWfvBi2aA3J20lxhtugGefX5ikd6P4mNqnxN9BXxA62qfcg4YI9eVhT7guvTPvf3LuR2bVdHh9KOpULQQHY9zxld/tOV6ue4s2zW++gyWPcLDLbORw==

@yyx990803 I think this reproduction appears to have the correct output (computed didn't calculate until the render function, and state.a was changed to 1 before it was tracked)

[yyx990803]

@Doctor-wu state.a should be tracked regardless, and state.a = 2 should trigger component re-render.

[Doctor-wu]

@Doctor-wu state.a should be tracked regardless, and state.a = 2 should trigger component re-render.

@yyx990803 state.a was indeed tracked, but timing is key. Computes are lazily calculated. When c.value was accessed, the process had already arrived at the render function, which is after the setup function that executes state.a = 2. In other words, when state.a = 2 is executed, there is no effect tracked by state.a.

[yyx990803]

You are looking at an outdated repro, there is a setTimeout (I edited the link a few times)

[Doctor-wu]

You are looking at an outdated repro, there is a setTimeout (I edited the link a few times)

That's true😂, I'll check the new one.

[Doctor-wu]

I think the key to this problem is the computed was mutated in render lead the computed was marked to Dirty after the invocation of the render function. And I think that is a dangerous state of computed (marked as dirty, which means it won't be reactive anymore)