Vue 52: Rendimiento: v-memo y shallowRef
easy⏱ 5 mincoursevue
v-memo - saltar el re-render de una fila
v-memo='[dep1, dep2, ...]' le dice a Vue que memorice el subárbol de una fila de v-for y que lo salte por completo en el próximo render si ninguna de las dependencias listadas cambió - incluso si el componente padre se re-renderiza por otra razón completamente distinta. Es una optimización quirúrgica para listas grandes donde la mayoría de las filas no cambian en cada actualización.
<div
v-for="item in items"
:key="item.id"
v-memo="[item.active]"
>
<!-- this whole subtree is skipped on re-render
unless item.active changed since last time -->
{{ item.name }} - {{ expensiveFormat(item) }}
</div>
shallowRef - reactividad superficial a propósito
shallowRef(obj) solo rastrea la reasignación de .value; las mutaciones dentro de obj no disparan nada. Es exactamente lo que quieres para objetos grandes (un árbol de datos externo, un blob de configuración) donde volver profundamente reactivo cada campo anidado sería un desperdicio de rendimiento.
import { shallowRef, triggerRef } from 'vue';
const big = shallowRef({ nested: { count: 0 } });
big.value.nested.count++; // NOT reactive - no re-render
big.value = { nested: { count: 1 } }; // reactive - .value reassigned
triggerRef(big); // force a re-render manually if you must mutate deep
Pruébalo: observa cómo divergen las columnas
Haz clic varias veces en 'Force parent re-render' y observa cómo la columna sin v-memo muestra siempre el tick más reciente en cada fila, mientras que la columna con v-memo se queda congelada. Luego activa el interruptor de una sola fila - solo esa fila se actualiza, porque solo su dependencia cambió.