Warnings/Types for the key attribute
Author: skirtles-codeCreated Nov 18, 2020Updated Aug 12, 2026
Labels:sparkles: feature requestscope: types
Version
3.0.2
Reproduction link
https://jsfiddle.net/skirtle/2czyf41n/
Steps to reproduce
The example illustrates a couple of things:
- Using objects for the
keyattribute works (this is good but undocumented). - No warning is shown when using the same
key(value1) for multiple adjacent siblings.
What is expected?
A quick recap of Vue 2:
- Keys had to be primitives: string, number, boolean or symbol. Anything else triggered an immediate warning during rendering.
- Using the same
keyon siblings triggered a warning about duplicate keys.
Observations about Vue 3:
- From looking through the code it seems that keys are compared using
===. In some edge cases they are compared using aMap. Either way, objects can now be used as keys. I think this is great. - From a TS perspective, keys are only permitted to be a string or number.
- There is a warning about duplicate keys but it is only hit during updates and only in very specific circumstances.
Based on my best guess about what the expected behaviour is I suggest the following changes:
- There should be a warning during rendering for duplicate keys. Duplicates indicate a developer error, even if they cause no real harm.
- The TS definitions should be updated to allow anything to be used as a key.
- The docs should be updated. Being able to use an object as a
keyis a great new feature and, if it's intentional, it's something worth shouting about. I'm happy to make the docs changes myself once I have confirmation of the officially supported behaviour.
Source: vuejs/core