v-memo
Memoizes a subtree, re-rendering only when dependencies change.
Syntax
v-memo="[dep1, dep2]"Parameters
| Name | Type | Required | Description |
|---|---|---|---|
deps | any[] | No | Array of values; subtree updates only if one changes. |
Returns
directive — Skips re-render when deps are unchanged.
Examples
<script setup lang="ts">
import { ref } from 'vue';
const list = ref(Array.from({ length: 1000 }, (_, i) => ({ id: i })));
const selected = ref(0);
</script>
<template>
<div
v-for="item in list"
:key="item.id"
v-memo="[item.id === selected]"
>
{{ item.id }} {{ item.id === selected ? 'X' : '' }}
</div>
</template>
Notes
v-memo skips updating the subtree unless one of the array entries changed
(shallow compare), similar to React.memo. With an empty array `v-memo="[]"`
it behaves like v-once. Primarily a large-list performance optimization;
avoid premature use as it adds complexity.