`:key` shorthand incorrectly compiles to `UNKEYED_FRAGMENT`

[NonSpicyBurrito]

Vue version

3.4.27

Link to minimal reproduction

https://play.vuejs.org/#eNp9UE1Lw0AQ/SvDXKpQU1BBKKmg0oMeVNSbKxKSSdw22V12NzES8t+d3dDag/S28z5m37wBb4xJupZwianLrTQeHPnWXAslG6OthwEslTBCaXUDM5bOhMq1ch629ONgFeiT949TodLFtIG9PHhqTJ154gkgLWQH3Vmp7Uog+0CqaBcIyzAuWJUuDiw4R+/4m1JWycZpxfmGsEhgrhsja7JPxkuOIXAJkQlcVtf6+yFi3rY03+H5F+Xbf/CN6wMm8NmSI9uRwD3nM1uRn+j16yP1/N6TjS7amtVHyBdyum5Dxkl226qCYx/oYtr72LJU1Ztb956U2x0VggblGPUCufm7I6f/xb1ILqNPqJFb/OzIhp1cIBPJ+RWOv3pFpHc=

Steps to reproduce

In minimal reproduction, see playground compiled JS.

What is expected?

:key should compile to the same output as :key="key".

What is actually happening?

:key compiles to UNKEYED_FRAGMENT, whereas :key="key" compiles to KEYED_FRAGMENT.

System Info

No response

Any additional comments?

Here is a practical example in playground of how this bug can affect behavior by causing stateful tags and components to be rebuilt and thus losing state.

[quiteeasy]

The issue is caused by not setting the .exp field in transforms/vFor.ts for the key prop. The .exp property is set after all children are traversed. I'm currently working on a solution to address this problem.

[neneodonkor]

@quiteeasy Very interesting. But I find it strange that folks actually use 'key' to bind to key. 🤔

[NonSpicyBurrito]

Very interesting. But I find it strange that folks actually use 'key' to bind to key. 🤔

Yeah v-for="key in keys" would be quite rare and is served as simply a minimal reproduction.
A more realistic example would be something where you already have to generate unique keys for a list of objects to iterate through like notifications, and destructure while iterating so you have the choice to simply name it key and use the shorthand:

<div v-for="{ key, title, body, etc } in notifications" :key>
    {{ title }}
    ...
</div>

[neneodonkor]

Very interesting. But I find it strange that folks actually use 'key' to bind to key. 🤔

Yeah v-for="key in keys" would be quite rare and is served as simply a minimal reproduction. A more realistic example would be something where you already have to generate unique keys for a list of objects to iterate through like notifications, and destructure while iterating so you have the choice to simply name it key and use the shorthand:

<div v-for="{ key, title, body, etc } in notifications" :key>
    {{ title }}
    ...
</div>

Perhaps in this case, but how come it works? I tried and it iterated through the content.

[quiteeasy]

@Doctor-wu, please review my pull request and the comments I've left on yours. I've highlighted some potential areas for improvement in both PRs. Your feedback and collaboration on these suggestions would be greatly appreciated.