Componente de listado: Ciclo de vida de un componente, Created - 14

▶

Nos quedamos en que vamos a necesitar hacer este llamado para cargar la data, ya que aquí tenemos la variable definida, pero todavía no la estamos utilizando. Más adelante veremos cómo la iteramos, pero por ahora lo que queremos es llenarla.

Ciclo de vida en Vue.js

Para eso, tenemos que presentar el complicadísimo (y aburridísimo) ciclo de vida de una aplicación en Vue. También puedes buscarlo en español como "ciclo de vida en Vue". Aquí hay una página que lo explica:

https://vuejs.org/guide/essentials/lifecycle

El gráfico puede parecer una pesadilla, pero al final lo que tienes que entender es lo siguiente: cuando se crea la aplicación en Vue (lo que llaman new Vue, que es básicamente esto que estamos haciendo acá), suceden muchas cosas internamente. Pero en algún punto, se van llamando ciertos métodos del ciclo de vida que son los que nos interesan.

Métodos del ciclo de vida

Los principales métodos que debemos conocer son:

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeUnmount
• unmounted

Esto se entiende mejor cuando usamos Vue Router, que nos permite navegar como si fuera una SPA (Single Page Application), es decir, que le damos click a un enlace, cambia la URL, y también el contenido de la página, sin recargar.

No me voy a detener mucho en esto, pero básicamente, cuando cambiamos de una página a otra —por ejemplo, de una página de listado (como en CodeIgniter 4) a una de detalle—, se monta el nuevo componente y se desmonta el anterior. Ahí es donde entran en juego mounted y unmounted.

• Cuando se monta el componente de detalle, se ejecuta mounted.
• Cuando se desmonta el componente de listado, se ejecuta unmounted.

Existen otros métodos intermedios como beforeUnmount, que se ejecuta justo antes de desmontar el componente, pero en general, no los usamos tanto.

El método updated

También tenemos updated, que se ejecuta cada vez que el componente se actualiza. Esto es parte de la reactividad de Vue, y lo entenderemos mejor cuando hagamos una implementación más adelante.

Recuerda que cuando te presentaba Vue, usábamos un contador como ejemplo:

export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Count is: {{ count }}</div>`
}

Cada vez que le damos click a un botón que incrementa count, Vue actualiza la vista automáticamente. Para controlar ese tipo de comportamiento, podrías usar updated, aunque sinceramente, para aplicaciones pequeñas o medianas tipo CRUD (que son las que usualmente trabajamos), estos métodos no suelen ser necesarios. Solo los usarás en casos muy específicos, dependiendo de lo que quieras hacer.

Igual sucede con los métodos relacionados con destroy (beforeUnmount, unmounted), que se pueden usar para liberar recursos, por ejemplo, si estás viendo algo con watch, pero no siempre son necesarios.

Los más usados: created y mounted

Los más usados en la práctica son:

• created: cuando necesitas preparar la data.
• mounted: cuando necesitas interactuar con el DOM.

Puedes usar cualquiera de los dos, pero como en este caso solo nos interesa cargar la data al principio, usaremos created.

<template>
    {{ this.movies }}
</template>
<script>
export default {
    created() {
        axios.get('http://code4movies.test/api/pelicula')
            .then(res => this.movies = res.data)
            .catch(error => console.log(error))
    },
    data() {
        return {
            movies: []
        }
    },
}
</script>