Vue · Senior · Question 14 of 75

Why can passing `activeId` to every list item make large lists slow?

<ListItem v-for="item in list" :key="item.id" :id="item.id" :active-id="activeId" />

✓Correct answer: Every item re-renders when activeId changes; pass a precomputed :active="item.id === activeId" instead
2Props with dashes are slow to parse
3Vue limits the number of props per component

Explanation

Child components update when any prop changes. Keeping props stable means only the two items whose active flag flips will re-render.

Further reading

Vue: Performance ↗

Test yourself

Take the Vue · Senior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.