The release of Vue 3.2 introduced some new functionalities, mainly related to performance and optimisations. One of these features is a new directive called v-memo

What is v-memo?

v-memo, as the name suggests, is a new directive related to the memoization of parts of a template. If you are not familiar with the term "memoization", wikipedia describes it as:

In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again

In Vue this description sounds really like what computed properties already do. In fact v-memo can be seen as a computed property for parts of a template!

Using v-memo

v-memo accepts a single parameter, which should be an array of dependencies. The element that uses this directive and all its descendants will only be re-rendered when one of the dependencies change. For example:

<div v-memo="[dep1, dep2]">
  ...
</div>

Note that if you don't provide dependencies , ie:v-memo="[]", you obtain the same functionality as v-once.

Examples

Since v-memo is mainly useful for performance reasons, one of the best scenarios where you'd want to use it is when rendering huge lists of items with v-for:

<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
</div>

In this example we are telling v-memo to only re-render an item if it has been selected or deselected, all other items will be skipped entirely. We don't need to include item.id in the dependency array since the sub-template of every item is already keyed, so it generates a separate sub-tree. Another thing to keep in mind is that v-memo is only useful in a v-for if you are using some kind of interpolation. If for example you are rendering a list of components like <MyComponent v-for="item in list" :key="item.id" v-memo />, you are not going to benefit from v-memo as the diffing is made inside each component.

I've prepared an example that shows visually how v-memo helps with performance in lists, you can find the code embedded below