Mejora el rendimiento de Vue.js con v-once y v-memo

v-once

Con la directiva v-once indicamos a nuestro componente que se renderice solo una vez. El contenido será estático después de la primera carga.

<template>
  <div v-once>
      <h1>{{post.title}}</h1>
      <div>{{post.content}}</div>
 </div>
</template>

Si se utiliza con las condicionales v-if o v-show, permanecerá el estado inicial de éstas. Es decir, si en el primer renderizado, el componente es visible, siempre será visible. De la misma forma, sucederá con el estado contrario.

Cómo funciona internamente

Es como “congelar” un componente en su primer renderizado. Vue lo renderiza una sola vez y después lo ignora completamente en futuras actualizaciones.

Proceso interno:

• Vue marca el nodo como “estático” después del primer render
• En re-renderizados posteriores, Vue literalmente salta ese nodo
• No se ejecutan watchers ni computed properties en ese fragmento

¿Cuándo utilizar v-once?

Solo se debe utilizar cuando los datos no vayan a mutar después del primer renderizado, como por ejemplo, el contenido de un articulo, una barra de navegación, datos de una tabla… Existen muchísimos casos posibles dependiendo de la aplicación.

Ejemplo real

<!-- Logo y menú principal que son estáticos -->
<header v-once>
  <img :src="company.logo" :alt="company.name">
  <nav>
    <router-link v-for="item in staticMenu" :to="item.path">
      {{ item.label }}
    </router-link>
  </nav>
</header>

v-memo

La directiva v-memo almacena renderizados anteriores del componente, que utilizará para acelerar los próximos. Para utilizarlo, le pasaremos un array con X valores y solo renderizará el componente si uno de estos valores se modifica:

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

Si le pasamos una matriz vacía, el funcionamiento sería el mismo que el de v-once:

<template>
  <div v-memo="[]">
   ...
  </div>
</template>

Cómo funciona internamente

Es más inteligente que v-once. Vue “recuerda” renderizados anteriores y solo vuelve a renderizar si las dependencias que le especificas cambian.

Proceso interno:

• Vue almacena una “foto” del renderizado anterior
• Compara las dependencias del array con los valores previos
• Si no han cambiado, reutiliza el renderizado guardado

La diferencia clave:

• v-once: “Nunca más renderices esto”
• v-memo: “Solo renderiza si estas cosas específicas cambian”

¿Cuándo utilizar v-memo?

V-memo es muy útil si se quiere controlar cuando renderizar un componente, pero, a diferencia de v-once, su uso no es tan habitual. Como indica la documentación oficial, su uso esta orientado a “microoptimizaciones en escenarios críticos para el rendimiento y rara vez se necesita”, el caso más común donde se puede utilizar es en listas muy grandes, donde se representan más de 1000 elementos.

Ejemplo real

<!-- Lista de chats - solo actualiza si hay nuevos mensajes o cambio de estado -->
<div v-for="chat in chatList" 
     v-memo="[chat.lastMessageId, chat.unreadCount, chat.isOnline]">
  <ChatPreview :chat="chat" />
</div>