Ciclos de Vida en Composition API de Vue.js

Clase 35 de 37 • Curso de Reactividad con Vue.js 3

Resumen

¿Cómo trabajan los ciclos de vida en Vue.js con Composition API?

El manejo de los ciclos de vida en Vue.js ha evolucionado con la introducción del Composition API, cambiando la manera en que definimos y utilizamos estos ciclos en comparación con el Options API. En el Composition API, trabajamos directamente con funciones que nos permiten acceder a módulos internos de Vue, lo que mejora la modularidad y funcionalidad de nuestras aplicaciones.

¿Qué es la función setup?

En el contexto del Composition API, la función setup es fundamental. Aquí es donde se inicializan el estado reactivoo, los métodos y se reúnen los hooks del ciclo de vida que reemplazan los métodos como created o beforeCreate. En el setup, ya se tiene acceso a la información reactiva, sin embargo, el DOM aún no está montado en el navegador. Esto significa que tareas como el fetch de datos deben realizarse aquí, asegurando que la aplicación obtenga los datos en una etapa temprana.

setup() {
  // Lógica de fetch aquí
}

¿Cómo funcionan los hooks de ciclo de vida personalizados?

A diferencia del Options API, donde los ciclos de vida están predefinidos, el Composition API utiliza funciones específicas para cada hook, que siguen el patrón on+nombreDelCiclo, como onMounted o onUpdated. Estas funciones nos permiten implementar acciones específicas en fases concretas del ciclo de vida de un componente.

Por ejemplo, para ejecutar código después de montar el componente, usamos onMounted.

import { onMounted } from 'vue';

setup() {
  onMounted(() => {
    console.log('Componente montado');
    // Acciones a realizar después del montaje
  });
}

¿Cuándo usar created, mounted o updated?

La elección del hook de ciclo de vida adecuado es crucial dependiendo del caso de uso:

Created: Excelente para obtener datos de una API, pues permite trabajar con datos reactivos antes de que el componente esté completamente montado.
Mounted: Ideal para la manipulación del DOM, ya que asegura que todos los elementos están disponibles en el navegador.
Updated: Útil para reaccionar a cambios de datos que requieran que el DOM se refresque.

Desafío: Filtrar una lista de productos en Vue.js

Ahora que conocemos los conceptos básicos del Composition API y los hooks de ciclo de vida, te desafiamos a aplicar este conocimiento en un reto práctico: Filtrar una lista de productos basada en el input del usuario.

¿Cómo abordar el desafío?

Crear un input: Permite al usuario introducir el valor para filtrar.
Capturar eventos: Usa eventos en Vue.js para detectar cuando el usuario presiona una tecla específica, como 'Enter'.
Propiedades computadas: Recalcula una propiedad computada para actualizar dinámicamente la lista de productos basada en la entrada del usuario.

Este ejercicio no solo consolidará tus conocimientos sobre las propiedades reactivas, sino que también te ayudará a comprender mejor cómo manipular eventos y estados en Vue.js. ¡Te animamos a aceptar el reto y descubrir las posibilidades del desarrollo con Vue!

Jose Luis Orozco Mejia

student•

Reto realizado con Composition API:

Se agrega un Input para buscar con una directiva v-model:

        <div class="product-search">
          <input
            type="text"
            placeholder="Buscar producto..."
            v-model="filtro"
          />
        </div>

dentro de setup() se declara el filtro:

const filtro = ref("");

Se utiliza una propiedad computada:

          filteredProducts = computed(() => {
            if (filtro.value != "") {
              return products.value.filter((product) =>
                product.name.toUpperCase().includes(filtro.value.toUpperCase())
              );
            }
            return products.value;
          });

y en v-for del componente **product **se reemplaza la propidad **products **por **filteredProducts **:

        <product
          v-for="product in filteredProducts"
          :key="product.name"
          :product="product"
          @sendtocart="addToCart($event)"
        ></product>

Al final se agrega al return del setup() **filtro ** y filteredProducts:

          return {
            ...toRefs(cartState),
            products,
            filtro,
            addToCart,
            filteredProducts,
          };

👌

Julian David Alzate Cuervo

student•

excelente solución

Carlos Eduardo Gomez García

teacher•

Reto listo, no sé muy bien en dónde se usaría la computed, ya que desde mi punto de vista no hace falta, pero yo la use para trackear cuando el valor de products cambie y en lugar de usar a products dentro del ```forestoy usando la computedallProducts``: . Primero este es mi input que ejecuta la búsqueda cuando el usuario presiona enter:

<div class="input-container">
	<input type="text" v-model="search" @keypress.enter="searchProducts">
</div>

Y a products lo sustituí por la computed:

<product v-for="product in allProducts" :key="product.name" :product="product" @sendtocart="addToCart($event)"></product>

A data() le agregué una propiedad search que contendrá la búsqueda del usuario:

data() {
    return {
        products: [],
        cartOpen: true,
        search: "",
        // total: 0,
        cart: []
    }
},

No supe como hacer el filtro desde el API, así que hago el filtro desde JavaScript cuando se presiona enter y cambio la lista de products:

searchProducts() {
    fetch("https://my-json-server.typicode.com/iosamuel/demo/products")
    .then(res => res.json())
    .then(data => {

        this.products = data.filter(
            result => this.search == "" || result.name.toLowerCase() == this.search.toLowerCase()
        );

    });
}

Y simplemente la computed está pendiente por cuando products cambia:

allProducts() {
    return this.products;
}

También le agregué un poco de estilos y lo hice con el Compositio API, pero eso está en mi repositorio jajaja 👀: . https://github.com/RetaxMaster/vue3-platzi-commerce/tree/cc4652a233ebe89c6c8375279a4cf3f1445e8825

Ameth Ordoñez Erazo

student•

El tema es que así estas consultado a la API por cada busqueda que realizas, por lo que puede afectar el rendimiento. Es mejor filtrar sobre el array que ya tiene descargada toda la información y que retorne otro array con solo lo filtrado, y sobre ese es que vas a iterar en el v-for.

Jaime Eduardo Falla Cardozo

student•

En composition API, la función setup, reemplaza las funciones de beforeCreated, created. Las funciones del ciclo de vida que serán utilizadas, deben ser llamadas dentro de composition API para poderlas utilizar.

Elvis Saavedra

student•

usando composition API: en el HTML

// Para el filtro
<input type="text" placeholder="Ingrese texto a filtrar" v-model="search" />
// Para mostrar los productos
<main>
        <product
          v-for="product in filteredProducts"
          :key="product.name"
          :product="product"
          @sendtocart="addToCart($event)"
        ></product>
      </main>

Agregar al setup()

const filterState = reactive({
  search: '',
  filteredProducts: computed(() => {
    if (filterState.search === '') {
      return products.value;
    } else {
      return products.value.filter((product) => {
        return product.name.toLowerCase().includes(filterState.search);
      });
    }
  })
});```
Y luego exportarlo:

...toRefs(filterState),

Quise hacerlo con el @keyup.enter pero el computed no se actualizaba ya que no estaba actualizando el array principal de products, y si mutaba ese array luego si se borraba el filtro de búsqueda tenía que mostrar todo el array original, por eso mejor no tocar el array principal y sólo mostrar lo que vas filtrando, y el computed funciona ya que se está observando el search del filterState.

Felipe Moreno

student•

¿Qué diferencia existe entre el onMounted y el onUpdated?

El onUpdated sería similar al de React y cada que se actualice algo internamente en el componente se ejecutaría? o sólo se ejecuta "la primera vez" como el onMounted?

¡Gracias!

Carlos Eduardo Gomez García

teacher•

onMounted es cuando el componente ya está montado en el DOM, este solo se ejecuta una vez, y el onUpdated se ejecuta cada vez que el componente se actualiza :D

Joel Andres Bonilla Tellez

student•

reto cumplido :D

ahora recorro productsFiltered

<input type="text" placeholder="buscar..." v-model="filter" />

const filter = ref("");

        const productsFiltered = computed(() => {
          if(!filter.value == ""){
            return products.value.filter(p => p.name.toLowerCase().includes(filter.value.toLowerCase()))
          }
          return products.value;
        })

Alvaro Moises Gonzalez Quintero

student•

estuvo algo complicado el reto pero lo logre

<product v-if="filter"
              v-for="product in filteredProduct"
              :key="product.id"
              :product="product"
              @sendtocart="addToCart($event)"
              ></product>
     <product v-else
              v-for="product in products"
              :key="product.name"
              :product="product"
              @sendtocart="addToCart($event)"
              ></product>

primero condicione la renderización del item, si hay un producto dentro del arreglo de filteredProduct entonces se rederiza ese bloque, si no entonces se renderiza la lista completa.

   const filter = ref(false);
      const filteredProduct = ref([]);
      const search = ref('');

      const searchItem = computed(()=>{
        if(search.value === ''){
          return filter.value = false;
        }else{
          filter.value = true;
          return filteredProduct.value = products.value.filter(product => product.name.toLowerCase().includes(search.value.toLowerCase()));
        }})

este código primero conecta "search" a un input con v-model, de esa forma sabermos que esta colocando el usuario, despues recorre el nombre de los elementos en products, y si alguno incluye el valor de search entonces se guarda en filteredProduct y filter se vuelve true, si lo que hay es un string vacio, entonces filter vuelve false, asi condicione la renderizacion

Daniel Parra

student•

La verdad no entiendo porque el profesor recomienda usar una computed. No se como la computed tendria cabida en el reto, yo lo hice con una function normal, v-model, y capturando el evento.

Andrea Estefania Blanco Avila

student•

Me encanta todas las soluciones, pero como recién comienzo con vue, para options API lo hice así:

Template

    <section>
      <input type="search" id="site-search" name="query" v-model="word" placeholder="Ingresar Producto"> 
      <button @click="search()">Buscar <img src="./images/search-icon.svg" alt="icono de buscar" height="12"/></button>
    </section>

<Product v-for="product in filterProducts" :key="product.name" :product="product" @sendtocart="addToCar($event)"/>

data

	word: "",

        query: ""

methods

	search(){
          this.query = this.word;
        }

computed

	filterProducts(){
          if(this.query != "") {
            return this.products.filter(prod => prod.name.toLowerCase().includes(this.query.toLowerCase()));
            // return this.products.filter(prod => prod.name.toLowerCase().includes(this.query.toLowerCase()) ? prod : false);
          }
          return this.products;
        }

Julieth Roncancio

student•

con Compasition API El input, lo deje con v-model pero no se si la forma correcta es :value

<input v-model="searchValue" type="text" placeholder="Escribe el producto">

La computada, se cambia la referencia de los productos a que sea la de los filtrados en el for.

const filteredProduct = computed(() => {
            if (!searchValue.value || searchValue.value.length < 4)  return products.value
            return products.value.filter((product) => (product.name.toLowerCase()).includes(searchValue.value.toLowerCase()))
          })

y se agregaron las nueva referencia y la computada al setup.

return {
            ...toRefs(cartState),

            searchValue,
            
            addToCart,

            filteredProduct,
          };

Ameth Ordoñez Erazo

student•

Yo lo hice con un v-model en el input:

 <input type="text" placeholder="Buscar..." v-model="search" />

Así quedó la computed:

const productsFiltered = computed(() => {
            if (search.value != "") {
              return products.value.filter(
                (prod) => prod.name.toLowerCase() == search.value.toLowerCase()
              );
            } else {
              return products.value;
            }
          });

Y el v-for itero es sobre el productsFiltered ya no sobre products.

El tema es que para no hacer tanta cosa, se debe escribir el nombre completo del articulo. La idea más adelante seria hacer una busqueda no exclusiva, donde pueda buscar por palabras separadas y ver si coincide alguna con alguna parte del nombre del articulo. Eso será para otra ocasión...

Fabricio Orrala

student•

entonces a diferencia de Options API, en Composition API todo va dentro de setup() ???

Dayana Martinez

student•

Mi solución Buscador

<input type="text" v-model="search" placeholder="Ingresar Producto">

Listado

<product v-for="product in productFiltrado" :key="product.name" :product="product" @send-product="addToCart($event)"></product>

Computed

 productFiltrado() {
               if(this.search!=''){
                return this.products.filter(product=>product.name.toUpperCase().includes(this.search.toUpperCase()));
              }
              return this.products;
          }

Naldo Duran

student•