·
0 min read
·360 views
Vue Tip: Memoize a Sub-Tree of the Template Using v-memo
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 Twitter 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.