Intro to VueJS lifecycle hooks with examples

by Sai gowtham3min read
Intro to VueJS lifecycle hooks with examples

In this tutorial, we are going to learn about lifecycle hooks in vuejs with the help of examples.

LifeCycle hooks

LifeCycle hooks are some methods which run from component creation to destruction.

beforeCreate method

beforeCreate method runs synchronously before a component instance is initialized, it means in this stage data properties, watchers, events are still not set up.

example:

<template>
  <div>
    <h1>Vuejs lifecycle hooks</h1>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      msg: "Hello vue world"
    };
  },
  beforeCreate: function() {    console.log("before instance is intialized");    console.log(this.msg); // undefined  }}

created method

created method runs after a component instance is initialized,it means in this stage data properties, watchers, computed properties and events are set up.

example:

<template>
  <div>
    <h1>Vuejs lifecycle hooks</h1>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      msg: "Hello vue world"
    };
  },
  created: function() {    console.log("after an instance is intialized");    console.log(this.msg); // Hello vue world  }}

beforeMount method

It runs before a component is connected into the dom.

Note: This hook is not called during server-side rendering.

example:

<template>
  <div>
    <h1>Vuejs lifecycle hooks</h1>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      msg: "Hello vue world"
    };
  },
   beforeMount: function() {    console.log("Component is still not connected to dom");  }}

mounted method

It runs after a component is connected into the dom.

example:

<template>
  <div>
    <h1>Vuejs lifecycle hooks</h1>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      msg: "Hello vue world"
    };
  },
   mounted: function() {    console.log("Component is connected to dom");  }}

beforeUpdate method

It runs when data changes, before the component re-renders with the updated data.

example:

<template>
  <div id="app">
    <h1 ref="h1-element">{{ msg }}</h1>
    <button @click="msg = 'Msg is updated';">Change msg</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      msg: "Hello Vue world"
    };
  },
  beforeUpdate: function() {
    console.log(this.$refs["h1-element"].textContent);    //Hello Vue world
  }
};
</script>

updated method

It runs when a component data changes and component re-renders with updated data.

<template>
  <div id="app">
    <h1 ref="h1-element">{{ msg }}</h1>
    <button @click="msg = 'Msg is updated';">Change msg</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      msg: "Hello Vue world"
    };
  },
  updated: function() {
    console.log(this.$refs["h1-element"].textContent);    //Msg is updated
  }
};
</script>

beforeDestroy method

it runs before a component is destroyed.

destroyed method

it runs after a component is destroyed.when this method is called it removes all directives, watchers and event listeners attached to the component.

example:

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="msg = 'Msg is updated';">Change msg</button>
    <button @click="$destroy();">Destroy</button>  </div>
</template>

<script>
export default {
  data: function() {
    return {
      msg: "Hello Vue world"
    };
  },
  beforeDestroy: function() {
    console.log("before component is destroyed");
  },
  destroyed: function() {
    console.log("after a component is destroyed");
  }
};
</script>