Conditional rendering

Conditional Rendering
Membretando el comentario:

• Un `v-if, posee costos de renderizado al estar alternando obligando a vue caer en un proceso de actualización.
• Un v-show, posee costos de renderizado al inicio pero minimizados por una precarga de la condicional.

Además, de que en un proceso de renderizado con v-if, pega en el proceso de destrucción de los elementos ocasionando que el perfomarce de la aplicación se vea afectada, cuando sea estresada.

Por último, eviten utilizar v-ifcon un v-for en una misma línea de declaración por ahorrase código. link

¿Cuál estructura es mejor?

La respuesta corta es: “Ninguna es mejor”. Todo depende de lo que necesites.
.
Hay que tener en cuenta algunas cosas a la hora de decidir si usar una u otra, por ejemplo, recordemos que con v-if los elementos NO SE RENDERIZAN, por tanto, mientras nuestra aplicación vaya fluyendo pueda que ese if se convierta en true, lo que significará que Vue tendrá que armar cada uno de los elementos que haya dentro (imagina si le pones un v-if a un pedazo enorme de HTML que se va a estar mostrando y ocultando varias veces…)
.
Para v-show, como vimos, los elementos sí se renderizan, pero son ocultados mediante estilos.
.
Por estos motivos, es más aconsejable usar v-if únicamente en elementos cuyo renderizado no va a ser tan constante y v-show en los que si serán constante.
.
Sin embargo, también depende de la funcionalidad de la aplicación, ya que puede que lleguemos a usar un v-show``` en un componente cuyo renderizado pueda depender de otro componente que pueda tenerv-ifo que pueda depender de la respuesta de un API. Para este caso, el usarv-showpuede ser un problema pues es probable que al momento de renderizarse el API no haya respondido o que el componente aún no se haya renderizado, por lo que al tratar de renderizar este otro componente puede causar errores, para estos casos es mejor usar unv-if``, para que se renderice hasta que el componente haya cargado o hasta que el API haya respondido 😄
.
Dejo el código de esta clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/9e2c54ee17c117db32fe0c572d0995b1c0b2fa35

V-show: Útil para aquellos elementos que tienen que existir en el DOM, pero simplemente tienen que ocultarse mediante algún estilo cuando no lo requiramos.

V-if: Útil para Eliminar por completo el elemento del DOM y viene bien para los elementos que no necesitemos que esten ejecutandose todo el tiempo en el navegador.

**Los conditional rendering **
Son directivas de Vue js con la cual establecemos si un componente se muestra o no en base a una condición.

v-show: si la condición se cumple su display será igual a initial, sino será none. Lo que hace esta es ocultar o mostrar un componente. No podemos usar v-else o v-else-if con esta directiva

v-if: si la condición se cumple se renderiza el elemento de lo contrario se elimina el elemento del dom.
Podemos usar v-else o v-else-if con esta directiva.

Cuando usarlas?: (opinión personal)
-Si el elemento se mostrará constantemente mejor usar v-show , estar usando las funciones del dom para eliminar o insertar un componente es más costoso en performance que un display: none.

-Si el elemento se va a mostrar según la información de una API: la info será la misma? usar v-show : usar v-if.

nota: no soy un experto es la mera opinión de un novato y acepto sugerencias 😉

Hay que tener resiliencia en este curso, la verdad estuve a punto de desertar al no entender la parte de meta programación, ahora quiero seguir viendo las clases, se puso mucho más interesante ahora.

CONDICIONALES - STATUS

Sugiero poner de esta manera los estados de los productos.
ya que se pones 100 unidades en stock sigue diciendo “Ultima unidad disponible”

y mostrar en pantalla el valor stock, para informar cuantas unidades quedan disponibles.

<div class="description__status" v-if="product.stock >= 3"> Disponible!</div>
                <div class="description__status" v-else-if="product.stock === 2"> El producto está por terminarse.</div>
                <div class="description__status" v-else-if="product.stock === 1"> La ultima unidad disponible!.</div>
                <div class="description__status" v-else>No hay productos disponibles!.</div>

saludos!!

No sé ustedes pero siento que al botón de agregar al carrito le falta vida.
Le agregué este sencillo estilo:

main .description button:hover {
  background: rgb(50, 1, 143);
  cursor: pointer;
}

Hay un problema de lógica en las condiciones que pones, pues al estar igualadas literalmente:

• product.stock === 3
• product.stock === 2

tienes el problema de que cuando el stock no sea ni 3 ni 2, se active automáticamente el else, por eso vemos que cuándo el stock es igual a 0, aún así muestra el mensaje de Última unidad disponible!

Lo correcto sería cambiar el v-else por un v-else-if: product.stock === 1