Key attribute and why it matters in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the key attribute in Vue?

The key attribute helps Vue identify which items in a list have changed, been added, or removed. It improves rendering performance and keeps component state consistent.

beginner

Why should keys be unique in a list?

Keys must be unique so Vue can correctly track each element. If keys are not unique, Vue might mix up elements, causing bugs or incorrect updates.

intermediate

What can happen if you use the index of an array as a key in Vue?

Using the index as a key can cause problems when the list changes order or items are added/removed. Vue may reuse elements incorrectly, leading to UI glitches or wrong component states.

intermediate

How does the key attribute affect component state in Vue?

The key attribute tells Vue when to reuse or recreate components. Changing keys forces Vue to recreate components, resetting their state. This helps avoid stale or wrong data in components.

beginner

When rendering a list of items in Vue, what is the best practice for choosing a key?

Use a unique and stable identifier from the data, like an ID. Avoid using array indexes or values that can change, to keep rendering efficient and correct.

What does the key attribute help Vue do when rendering lists?

A Sort the list alphabetically

B Change the color of list items

C Track which items changed, added, or removed

D Hide duplicate items

The key attribute helps Vue track changes in lists for efficient updates.

Why should keys be unique in Vue list rendering?

A To make the list look colorful

B To avoid mixing up elements and bugs

C To speed up network requests

D To increase font size

Unique keys help Vue correctly identify each element and avoid bugs.

What is a potential problem of using array index as a key?

A Vue may reuse elements incorrectly when list changes

B It makes the list load slower

C It causes syntax errors

D It disables animations

Using index as key can cause Vue to reuse elements wrongly if the list order changes.

What happens if you change the key of a component in Vue?

A Vue recreates the component and resets its state

B Vue changes the component's color

C Vue hides the component

D Vue duplicates the component

Changing the key forces Vue to recreate the component, resetting its internal state.

What is the best choice for a key in a Vue list?

A The array index

B The item’s color

C A random number

D A unique and stable ID from the data

A unique and stable ID ensures Vue tracks elements correctly.

Explain why the key attribute is important when rendering lists in Vue.

Think about how Vue updates the screen efficiently.

Describe the risks of using array indexes as keys in Vue list rendering.

Consider what happens when items are added or removed.