Beginner LevelVue JS
How does the v-memo directive micro-optimize rendering of large lists in Vue 3.2+?
❓ Interview Prompt: Explain the v-memo directive, dependency array memoization, and skipping Virtual DOM diffing in massive lists.
Introduced in Vue 3.2, 'v-memo="[dep1, dep2]"' memoizes a template sub-tree.
How it Works:
If every value in the 'v-memo' dependency array matches the previous render, Vue skips Virtual DOM diffing and re-rendering for the entire element and its children!
Use Case:
Micro-optimizing performance in massive 'v-for' lists (1,000+ items) where selecting a single row re-renders the list. Memoizing on '[item.id, selected === item.id]' ensures only the toggled row re-renders!
Code Implementation Example
html
<template>
<ul>
<!-- Only re-render a row if item.id OR item.updatedAt changes! -->
<li v-for="item in list" :key="item.id" v-memo="[item.id, item.updatedAt]">
<p>{{ item.name }} - Updated: {{ item.updatedAt }}</p>
</li>
</ul>
</template>💡Micro-optimizing list rendering performance using v-memo dependency array.
🎯 Interview Key Takeaway
v-memo="[deps]" memoizes template subtrees, skipping Virtual DOM diffing unless specified dependencies change.
#v-memo#Performance#Directives#Beginner
Back to all Vue JS Questions→