DEV Community

Cover image for The Lifecycles of Vue.js
Amolik Vivian Paul
Amolik Vivian Paul

Posted on

The Lifecycles of Vue.js

Introduction

Lifecycle Hooks are special methods, or peepholes to give us ideas on how things work behind-the-scenes of a library (React) or framework (Vue). These methods allow you to know when a component is created, added to the DOM, updated, or destroyed in the Vue instance.

Note : All lifecycle hooks automatically have their this context bound to the instance, so that you can access data, computed properties, and methods.

The Hooks

Lifecycle

The Creation Hooks

beforeCreate
The beforeCreate hook runs whenever a component is initialized. None of the data, or methods are setup during this.

<script>
export default {
  beforeCreate() {
    console.log('Lifecycle Initialized')
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

created
During the created hook, we can access all reactive data members and methods as part of our component. The DOM is yet to be mounted.

<script>
export default {
  data() {
    return {
      data: ""  
    }
  },
  created() {
    this.data = "Created lifecycle called";
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

The Mounting Hooks

beforeMount
The beforeMount hook runs before the initial render of the components and after the template or render functions have been compiled.

<script>
export default {
  beforeMount() {
    console.log(`vm.$el has not been created yet`)
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

mounted

In the mounted hook, we have access to the reactive components, and rendered DOM (via this.$el).

<script>
export default {
  mounted() {
    console.log(`At this point, vm.$el has been created and el has been replaced.`);
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

The Updating Hooks

beforeUpdate

The beforeUpdate hook runs after data changes on your component, right before the DOM is patched and re-rendered.

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },

  beforeUpdate() {
    console.log(this.counter)
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

updated

The updated hook runs after data changes on your component and the DOM re-renders.

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },

  updated() {
    console.log(`At this point, Virtual DOM has  re-rendered and patched.`)
    // Fired every second, should always be true
    console.log(this.counter);
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

The Destroying Hooks

beforeDestroy

The beforeDestroy is invoked right before teardown or destroyed. The component completely exists and is totally functional.

<script>
export default {
  beforeDestroy() {
    console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

destroyed

The destroyed hook is when everything part of the component has been torn down, or destroyed from existence. This method is useful for all cleanup required within the component.

<script>
export default {
  destroyed() {
    console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

For more to learn about VueJS, click here.

Discussion (0)