Vue options API lifescycle visualization

Vue-options-API-lifescycle .vue

<template>
  <div id="lifecycle">{{ message }}</div>

  <button v-on:click="message = 'tulisan setelah di render ulang'">
    Update!
  </button>
</template>

<script>
import ChildComponent from "./components/ChildComponent.vue";

export default {
  data(){
    return{
      message: "Text Awal"
    }
  },
  beforeCreate(){
    console.log("Before Create")
  },
  created(){
    console.log("created")
    console.log(this.message)
    console.log(document.getElementById('lifecycle'));
  },
  beforeMount(){
    console.log('Before Mount')
  },
  mounted(){
    console.log('Mounted')
    console.log(this.message)
    console.log(document.getElementById('lifecycle'));
  },
  beforeUpdate(){
    console.log('Before Update')
    console.log(document.getElementById('lifecycle').textContent);
  },
  updated(){
    console.log('updated');
    console.log(document.getElementById('lifecycle').textContent);
  },
  beforeUnmount(){
    console.log('Before Unmount');
  },
  unmounted(){
    console.log('Unmounted');
  }
};
</script>

<style></style>