7). Understanding Vue.js Lifecycle Hooks

Each Vue instance goes through a series of initialization steps when it’s created

It needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks.

1). Creation

Creation hooks are the very first hooks that run in your component. They allow you to perform actions before your component has even been added to the DOM. 

2). beforeCreate

The beforeCreatehook runs at the very initialization of your component. data has not been made reactive, and events have not been set up yet.

<script> 

   export default { 

       beforeCreate() { 

           console.log('Nothing gets called before me!') 

       } 

   } 

</script>

3). created

You can access all data and events.

4). Mounting (DOM Insertion)

Mounting hooks are often the most-used hooks, for better or worse. They allow you to access your component immediately before and after the first render. They do not, however, run during server-side rendering.

beforeMount(): The beforeMount() method is invoked after our template has been compiled and our virtual DOM updated by Vue. 

mounted(): This hook, you will have full access to the reactive component, templates, and rendered DOM (via. this.$el). Mounted is the most-often used lifecycle hook. The most frequently used patterns are fetching data for your component (use created for this instead,) and modifying the DOM, often to integrate non-Vue libraries.

Below is life cycle of vue.js which is given in vue.js offical site.