Version

3.0.11

Reproduction link

https://codesandbox.io/s/github/iendeavor/dont-use-index-as-template-key-but-how-about-sparse-array/tree/main/vue-3

Steps to reproduce

1. Clone this repo or open it on codesandbox

2. Run and open it with Chrome browser

3. Click the router link: use-sparse-array-and-vshow

4. Open ELements devtool panel and inspect the expand ul tag recursively

5. When click on 'Remove first' button, you will see only removing element be re-rendered as expected.

6. But if you change tab to use-sparse-array-and-vif and click the button again, ALL elements are re-rendered.

What is expected?

Only the removing element be re-rendered.

What is actually happening?

All elements are re-rendered.

This behavior is works correctly in Vue 2: https://codesandbox.io/s/github/iendeavor/dont-use-index-as-template-key-but-how-about-sparse-array/tree/main/vue-2

your repro is very weired.its refresh automatically every few seconds without doing anything in codesandbox. 🤔

Not all elements are re-rendered, multiple warnings are because the deleted elements have the undefined key at the time of patch. because getTransitionRawChildren does not filter out deleted elements correctly when using v-show.

You need to key the li, not the template. You should get a warning in your IDE.

Is the docs wrong? https://v3.vuejs.org/guide/migration/key-attribute.html#with-template-v-for

hmm, no, they should be right...