[Vapor]Unexpected data update
Vue version
v3.6.0-alpha.2
Link to minimal reproduction
https://play.vuejs.org/#eNp9Uk1vwjAM/StWLoBgBY1tB1SQtokDk/ahMe0UaYpaA2VtEiVph1T1v89JgaFt4lTb79l+fmnNbrWOqhLZhMU2MZl2YNGVGiqhlZlxmRX0dVCDwRU0sDKqgA41dLhMlLQOElVKB1OPd0c9LrmkAQvp0FQi73Z7MJ1BzSW0xIiKJfb7XDYDuB75hnjYLqZllDgsdC4cUgYQp1kVgn24DNL68O7FxcNfaFgwgbrea2qaPxQjZKqKwHkUbhO1OYk85R6ieHgUwwbMWbp3la2jrVWS7Ao3cZaoQmc5mmftMvKDMxreLuRM5Ln6egg1Z0ocHOrJBpPPf+pbu/M1zl4MWvIPOTtiTpg1uhaeL59wR/ERLFRa5sQ+A76iVXnpNba0u1KmJPuEF9QuwnNncv1m5zuH0h6O8kI9swl8zugXuD9z+o/ccXQV+ujFycWPCo2fSQaOo5todCFyvRHRJWu+AYTr1aI=
Steps to reproduce
Observe the changes of random
What is expected?
random should not be regenerated
What is actually happening?
When count changes, random will also be regenerated
System Info
Any additional comments?
No response
I think this is the expected behavior, which aligns with vdom. see Playground
Wasn't the goal of vapor to update only parts of the template that reference reactive data? In that case I'd also expect updating only the div with {{ count }}. If the whole template rerenders what's the point of this feature?
Reopened, this is a scenario that can be optimized.
Not sure why they've put both interpolation expressions in the same effect without proof that they share the same dependencies. Just have a separate effect for each interpolation. The 2nd effect would be discarded after the 1st evaluation because there's no reactive data. Pure string or math expressions are recognizable at compile time.
This is indeed a matter of controversy, but I believe that having Vue identify whether it is a pure function would impose a heavy burden and be extremely difficult. I think such optimization work should be done by us developers. For example, by writing optimizations such as after-refs in the setup function and using the v-once directive.
Maintaining the current behavior here feels more intuitive to me. Otherwise, we'd be introducing an intentional breaking change. If we “optimize” this, could someone report that data stops updating after enabling vapor?
I mean, some users may actually need to run a non-idempotent function. If preventing execution is desired, please using the approach suggested above.
But isn't the goal of the vapor mode to only update responsive data that has been changed? If that's the case, I think the current behavior is not intuitive.
I tried vue-jsx-vapor, and it only updates <div>count: { count.value }</div>. I think this is the expected behavior.
vue-jsx-vapor playground: https://repl.zmjs.dev/vue-jsx-vapor#eNq1VFFv2jAQ/itW9kAQ4KBV2wMC1knrQyt1lYa0l2WT3OQAU8e2bIeCUP77zk6AQGm1h/Uh0fm+7873fU68i6zJEi5z2NClK0Q02kWZyiEaRWO/nqaSkPGjyrchwthmhmtH3FbDJI0KlZcC0qhBCeGFVsaRHckMMAc/GS6/ak0qMjeqIJ11CZ0zrodrkCYYU2c3B8pplxifLi1UKV3c+cC07nSbqZJ6LByjSeR8TXiOEyILxxsnmKjFJI2acdIIjPrRkuc5yGg0Z8JC1Q+mNKO0HDloMzA/E5RK2AQwhzkrhSNxl0ymZOd3zJS0Dt84NZn42niIY3vEgruVDsyaibhV4EuQTDFdQq/nU1WffBruywy40kgSN1IP3nvR0xmCmvRI8Owo+4CH1iN/QMc9SHWBaJjMVeGZ98wtab3EKU+44yQEOFh10cg1d0DRgDlfoJktL5OEXDs7kCpbQvaUysZbdPPObsLsR38HK7sZrH0uMeyZruwlw4NzWpQLLu2I/KrHa7WLG2sJKVhmFHKcKaG/T1pVmgzumT7JV90Q/Mb3ZX0oIbT7nxrXSjDzHir/QU0jY2UVpg9CQtMUV4XmAsyDdhy/6TTCj6PujL+ZEOr5LuRaO2KNl34hj3J9Lo20AYt/AN4hbew2WDULh1LzTjxqkR0zC3A152b2HTYYH8D99fQG+AOsEqUXVNMeS5mjxhZPqpuChx1OFAAmv0GGZ8V89YMU2xec/IjvsfA3v3YAmmVPbAGv+C9ZsTfDm/DCDr+fBrzLZcbh9HjQvbryin6mwwETesnox5bIM3s99c8VHdLhF+xpJwhfn5W+IaT6C2DOEBQ=