The Lifecycles of Vue.js
Tags: vue, webdev, javascript
Published: 2021-08-24 20:44:14

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9i9mpo1pogaav6q7puoe.png)

## The Creation Hooks


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

```javascript
<script>
export default {
  beforeCreate() {
    console.log('Lifecycle Initialized')
  }
}
</script>
```

**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.

```javascript
<script>
export default {
  data() {
    return {
      data: ""  
    }
  },
  created() {
    this.data = "Created lifecycle called";
  }
}
</script>
```

## 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.

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

**mounted**

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

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

## The Updating Hooks


**beforeUpdate**

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

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

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

  beforeUpdate() {
    console.log(this.counter)
  }
}
</script>
```

**updated**

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

```javascript
<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>
```

## The Destroying Hooks


**beforeDestroy**

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

```javascript
<script>
export default {
  beforeDestroy() {
    console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
  }
}
</script>
```
**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.

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

For more to learn about VueJS, click [here](www.v3.vuejs.org).