Vue Component Lifecycle

<template>
  <div style="text-align: center;">
    <div>{{msg}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "hello world"
    }
  },
  beforeCreate() {
    console.log("Component is about to be created")
  },
  created() {
    console.log("Component has been created")
  },
  beforeMount() {
    console.log("Component is about to be mounted")
  },
  mounted() {
    console.log("Component has been mounted")
  },
  beforeUpdate() {
    console.log("Component is about to be updated")
  },
  updated() {
    console.log("Component has been updated")
  },
  activated() {
    console.log("Called when a cached component is activated")
  },
  deactivated() {
    console.log("Called when a cached component is deactivated")
  },
  beforeUnmount() {
    console.log("Called before the component is unmounted")
  },
  unmounted() {
    console.log("Called after the component has been unmounted")
  },
  errorCaptured(error, instance, info) {
    console.log("Called when an exception is caught from a child component")
  },
  renderTracked(event) {
    console.log("Called when the virtual DOM is re-rendered")
  },
  renderTriggered(event) {
    console.log("Called when the virtual DOM is triggered for rendering")
  },
};
</script>