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.

¿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.

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>

¿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.