#2633·Vue.js

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:

  1. Using objects for the key attribute works (this is good but undocumented).
  2. No warning is shown when using the same key (value 1) for multiple adjacent siblings.

What is expected?

A quick recap of Vue 2:

  1. Keys had to be primitives: string, number, boolean or symbol. Anything else triggered an immediate warning during rendering.
  2. Using the same key on siblings triggered a warning about duplicate keys.

Observations about Vue 3:

  1. From looking through the code it seems that keys are compared using ===. In some edge cases they are compared using a Map. Either way, objects can now be used as keys. I think this is great.
  2. From a TS perspective, keys are only permitted to be a string or number.
  3. 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:

  1. There should be a warning during rendering for duplicate keys. Duplicates indicate a developer error, even if they cause no real harm.
  2. The TS definitions should be updated to allow anything to be used as a key.
  3. The docs should be updated. Being able to use an object as a key is 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.