Vue · Senior · Question 15 of 75

How do you render a list of 10,000 rows efficiently?

✓Correct answer: Virtualize it - render only visible rows (e.g. vue-virtual-scroller or useVirtualList from VueUse)
2Wrap the list in <KeepAlive>
3Use v-show instead of v-if on each row

Explanation

Rendering every row creates many DOM nodes and component instances. Virtualization keeps the DOM small regardless of list length.

Further reading

Test yourself

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