Understanding v-memo in Vue3

Summary

This document provides an overview and explanation of the v-memo directive in Vue3, including usage examples and best practices for optimization.

Abstract

The content of this web page, titled "Understanding v-memo in Vue3," discusses the purpose and functionality of the v-memo directive in Vue3. This directive is used to memoize a sub-tree of the template and can be applied to both elements and components. The directive expects a fixed-length array of dependency values, and if every value is the same as the previous render, then updates for the entire sub-tree will be skipped, similar to the behavior of computed properties. The v-memo directive can accept an array of dependencies, expressions, and even an empty array (which will never re-render). The document covers various usage examples, best practices, and optimization scenarios for the v-memo directive.

Bullet points

The purpose of v-memo is to memoize a sub-tree of the template in Vue3.
v-memo can be used on both elements and components.
The directive expects a fixed-length array of dependency values for memoization.
If the dependency array remains unchanged, the DOM corresponding to v-memo will not update, even if the entire component is re-rendered.
If the dependency array changes, the DOM will be updated.
v-memo can accept empty arrays, one or more values, or expressions such as v-memo="myValue === true".
v-memo provides caching of the DOM segment it controls, enabling precise control over when large components are re-rendered.
Example scenarios include using v-memo with an empty array, variable, v-for, and specific optimization scenarios.
Best practices include not relying on v-memo for an empty dependency list, manually controlling the overall updates in complex scenarios, and using v-memo for optimization with large lists.

Overview

The official definition of v-memo is as follows:

Memoize a sub-tree of the template. Can be used on both elements and components. The 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.

Simply put, what v-memo does is similar to our existing computed properties, except that v-memo’s target is the DOM.

This new directive will cache the DOM segment it controls, and if a specific value changes, it will just run the update and re-render. These values are set by us manually.

  <div v-memo="[valueA, valueB]">
    ...
  </div>

Usage

v-memo accepts an array of dependencies. If the array changes, the DOM corresponding to v-memo, including its children, will be re-rendered. Conversely, if the dependencies array remains unchanged, even if the whole component is re-rendered, updates to the DOM corresponding to v-memo and its children will be skipped.

Additionally, the dependencies array can accept one or multiple values, like v-memo=”[valueOne, valueTwo]”, and also expressions such as v-memo=”myValue === true”.

Example 2: Variable

<template>
  <div v-memo="[name]">
    <div>{{ name }}</div>
    <div>{{ age }}</div>
    <div>{{ message }}</div>
  </div>
  <button @click="handleBtnClick">change</button>
</template>
<script setup>
import { ref } from 'vue';

const name = ref('loftyamb')
const age = ref(24)

const handleBtnClick = () => {
  age.value++;
  // Changes to the age value will not be updated on the page unless the name changes.
}

In certain scenarios, when the business logic is complex, manually controlling the overall updates can enhance performance. This can be very useful if we need precise control over when a large component is re-rendered.

Example 3: Using 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>
  <p>...more child nodes</p>
</div>

If v-memo is not used in the code above, every change to the selected variable would cause a complete re-render of the list. The caching provided by the new directive allows only the rows where the expression item.id === selected changes to update, that is, when an item is selected or deselected.

Summary

The use of v-memo can be summarized as follows:

It is not recommended to use v-memo if it depends on an empty list.

In certain scenarios, when the business logic is complex, manually controlling the overall updates can enhance performance.

If we need to control the re-rendering time of a large component, this is very helpful.

Optimization for rendering large lists.

Understanding v-memo in Vue3

Vue series of articles

Overview

Usage

Example 1: Empty Array

Example 2: Variable

Example 3: Using with v-for

Summary

Stackademic 🎓