life cycle vue component code example

Example 1: vue lifecycle hooks

<script>
  export default {
    beforeCreate() {
      console.log("beforeCreate")
    },
    created() {
      console.log("created")
    },
    beforeMount() {
      console.log("beforeMount")
    },
    mounted() {
      console.log("mounted")
    },
    beforeUpdate() {
      console.log("beforeUpdate")
    },
    updated() {
      console.log("updated")
    },
    beforeDestroy() {
      console.log("beforeDestroy")
    },
    destroyed() {
      console.log("destroyed")
    }
  }
</script>

Example 2: vue lifecycle methods

1.beforeCreate()
2.created() It's better to done some side effect in created life cycle hook //good for fetching data
3.beforeMount()
4.mounted() //it's a good to manipulate a DOM once its been mounted
5.beforeUpdate : if vue detects a change that is gonna occur in this component and it will run this before the change is updated in the DOM
6.updated ():run after the DOM has been updated and it has been rerendered