Using the Vue created lifecycle hook

In this guide, we will be looking at Vue created lifecycle hook. In general, life cycle hooks are windows to the driving factors of our frameworks.

In a nutshell, they help us keep track of what happens to our components. This would usually be when they are created, updated, destroyed or before either of the listed happens.

Created lifecycle hook is a function called synchronously after the instance is created. At this point, our methods, computed properties, watch/event callbacks have all been setup.

Say we have a method or function that we need to call when the component is created, this lifecycle hook does come in handy.

<script>
export default {
  data() {
    return {
      message: "Shows a demo message",
    }
  },

  created() {
    this.displayMessage();
  },

  methods: {
    displayMessage() {
      console.log(this.message);
    },
  },
};
</script>

Basically, the method displayMessage is called when the component is created. As mentioned earlier, we have access to the data instance at this point; hence why we can make reference to the message variable in the data instance.