·
0 min read
The v-memo directive is like a computed prop for the template and be used on both elements and components:
1<template>
2 <div v-memo="[valueA, valueB]">
3 <!-- ... -->
4 </div>
5</template>
The v-memo
directive expects a fixed-length array of dependency values to compare for the memoization.
If every value in the array was the same as last render, then updates for the entire sub-tree will be skipped.
If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: watch() vs. watchEffect()
Understand the difference between the watch() and watchEffect() Vue hooks.
Vue Tip: Check if Slot Is Empty
You can check if a slot is empty, for example, only to render it if it has content.