Ciclos de vida de un componente

Ciclo de vida de Vue

Son básicamente los pasos donde Vue va renderizando los componentes:
.

1. beforeCreate: Apenas se está iniciando nuestro componente
2. created: Ya está dispoinible toda la información reactiva del componente
3. Validaciones para decidir cómo renderizar aplicaciones en el DOM
4. beforeMount: Antes de que la aplicación sea montada en el documento
5. mounted: La aplicación ya está montada en el documento
6. beforUpdate: Ya que el componente está montado, cuando algo cambia, ANTES de que dicho valor sea actualizado se ejecutará este ciclo de vida.
7. updated: Ya que el componente está montado, cuando algo cambia, DESPUÉS de que dicho valor sea actualizado se ejecutará este ciclo de vida.
8. beforeUnmount: Antes de que el componente sea destruido
9. unmounted: Después de que el componente fue destruido

.

.
Pueden obtener más información sobre los hooks aquí:
.
https://v3.vuejs.org/api/options-lifecycle-hooks.html#beforecreate
.
Dejo el código de la clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/338d31fbe8449c7d48c54eec66242770ea0503a2

Por si gustan les dejo un ejemplo de como hacer esto mismo usando async y await
anexo código:

      async created() {
        try {
          const db = 'products';
          const urlApi = `https://my-json-server.typicode.com/satoshi9394/demo-vue3-platzi/${db}`;
          const response = await fetch(urlApi);
          const data = await response.json()
          this.products = data
        } catch (error) {
          console.error(`Error: ${error}, msg: fallo la comunicacion con la api`)
        }
      }

Les dejo el link del repo del profesor para que hagan fork.

https://github.com/iosamuel/demo

Tambièn el del JSON server.

https://my-json-server.typicode.com/

Aquí está el sitio para crear servers de prueba