Listing Component: Component Lifecycle, Created - 14

▶

We're going to need to make this call to load the data, since we have the variable defined here, but we're not using it yet. We'll see how to iterate it later, but for now, what we want is to fill it.

Lifecycle in Vue.js

To do this, we need to present the extremely complicated (and extremely boring) lifecycle of a Vue application. You can also search for it in Spanish as "ciclo de vida en Vue." Here's a page that explains it:

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

The graph may look like a nightmare, but in the end, what you need to understand is this: when the Vue application is created (what they call new Vue, which is basically what we're doing here), a lot of things happen internally. But at some point, certain lifecycle methods are called, which are the ones we're interested in.

Lifecycle Methods

The main methods we should know are:

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

This is best understood when using Vue Router, which allows us to navigate as if it were a SPA (Single Page Application), meaning that when we click on a link, the URL changes, as does the page content, without reloading.

I won't go into much detail on this, but basically, when we switch from one page to another—for example, from a listing page (like in CodeIgniter 4) to a detail page—the new component is mounted and the old one is unmounted. That's where mounted and unmounted come into play.

• When the detail component is mounted, mounted is executed.
• When the listing component is unmounted, unmounted is executed.

There are other intermediate methods, such as beforeUnmount, which is executed just before the component is unmounted, but we generally don't use them that much.

The updated method

We also have updated, which is executed every time the component is updated. This is part of Vue's reactivity, and we'll understand it better when we implement it later.

Remember when I introduced you to Vue, we used a counter as an example:

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

Every time we click a button that increments count, Vue automatically updates the view. To control this type of behavior, you could use updated, although honestly, for small or medium-sized CRUD applications (which are what we usually work with), these methods are usually unnecessary. You'll only use them in very specific cases, depending on what you want to do.

The same goes for the destroy-related methods (beforeUnmount, unmounted), which can be used to free resources, for example, if you're watching something with watch, but they're not always necessary.

The most used: created and mounted

The most used in practice are:

• created: when you need to prepare the data.
• mounted: when you need to interact with the DOM.

You can use either one, but since in this case we're only interested in loading the data at the beginning, we'll use 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>