`key` with `v-for` is *always* required on components to maintain internal component state down the subtree. Even for elements, it's good practice for predictable behavior like object constancy in animations.
Using unique keys helps Vue optimize DOM rendering by tracking node identities, especially when the order of items in a list changes. This is important for components to preserve their state and for elements to ensure predictable behavior in scenarios like animations.
Side-by-side examples engineers can pattern-match during review.
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul><ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul><ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul><ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>From the same buckets as this rule.
For applications, styles in a top-level `App` component and in layout components may be global, but all other components should always be scoped. This can be achieved through CSS modules, class-based strategies like BEM, or the `scoped` attribute in Single-File Components.