0Pricing
Vue Academy · Lesson

v-memo for Template Memoization

v-memo directive, dependency array, when re-render is skipped, comparison with computed.

What is v-memo

v-memo memoizes a section of the template. Vue caches the rendered output and only re-renders that subtree when one of the listed dependencies changes. It is a performance escape hatch for expensive, mostly-static markup.

The Dependency Array

You bind an array of dependencies. As long as every value in the array is equal to its previous value, Vue skips updating the entire element and its children.

<div v-memo="[dep1, dep2]">
  <!-- skipped unless dep1 or dep2 change -->
</div>

All lessons in this course

  1. v-memo for Template Memoization
  2. Profiling with Vue DevTools Performance Tab
  3. Virtual Scrolling for Large Lists
  4. Web Workers with Vue
← Back to Vue Academy