Lifecycle Hooks of the Vue Instance
Tags: webdev, programming, javascript, vue
Published: 2021-01-25 23:33:35

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at the lifecycle hooks of a Vue instance.

Vue Instance Lifecycle Hooks
============================

Each Vue instance goes through a lifecycle. The lifecycle events can be handled with functions, which are the lifecycle hooks.

For example, when a Vue instance is created, the `created` hook is called.

We can handle the `created` event emitted by Vue.js as follows:

```
new Vue({  
  data: {  
    foo: "bar"  
  },  
  created() {  
    console.log(`foo is ${this.foo}\`);  
  }  
});
```

Then we should see `foo is bar` from the `console.log` . Once the Vue instance is created and the initial data is set, the `created` hook is called.

This is why we see such output from the `console.log` .

Note that we can’t use arrow functions for lifecycle hooks since we reference the properties from `this` , which is the Vue instance.

There’re also other lifecycle hooks like `mounted` , `updated` , `destroyed` .

Lifecycle Diagram
=================

The full lifecycle diagram is below. It outlines the whole workflow for creating a new Vue instance.

The red rounded rectangles have the hooks that are called.

![](https://thewebdev.info/wp-content/uploads/2020/02/lifecycle.png)

Courtesy of vuejs.org

Creation Hooks
==============

Creation hooks are called when the Vue instance begins its initialization process. It lets us do things before the Vue instance is added to the DOM.

This hook is also run during server-side rendering

We don’t have access to `this.$el` (the target mounting element) or the DOM within this hook since no DOM manipulation is done at this point.

beforeCreate
------------

The `beforeCreate` hook runs during initialization. `data` has been made reactive and `events` aren’t set up yet.

For example, if we have:

```
new Vue({  
  data: {  
    foo: "bar"  
  },  
  beforeCreate() {  
    console.log("beforeCreated called");  
  },  
  created() {  
    console.log(`foo is ${this.foo}`);  
  }  
});
```

Then we see:

```
beforeCreated called  
foo is bar
```

which confirms that `beforeCreate` is called before `created` .

created
-------

`data` and `events` are available in the `created` hook since the Vue instance has been initialized.

For example, if we write:

```
new Vue({  
  data: {  
    foo: "bar"  
  },  
  created() {  
    this.foo = "baz";  
    console.log(`foo is ${this.foo}`);  
  }  
});
```

Then we get:

```
foo is baz
```

since we changed the value of `this.foo` in the `created` hook before logging its value.

Mounting Hooks
==============

The mounting hooks are run when DOM manipulation is being done, including mounting the Vue instance to the specified element.

We can use it to access or modify the DOM of our component.

beforeMount
-----------

The `beforeMount` hook runs before the initial render happens and after the template or render functions are compiled.

It doesn’t get called during server-side rendering.

For instance, if we write:

```
new Vue({  
  el: "#app",  
  data: {  
    foo: "bar"  
  },  
  created() {  
    console.log(`created called`);  
  },  
  beforeMount() {  
    console.log(`beforeMount called`);  
  }  
});
```

Then we get:

```
created called  
beforeMount called
```

mounted
-------

When the `mounted` hook is called, we have access to the component, template, and the DOM.

It’s used frequently for the initialization of our own data like fetching data over the network and integrate non-Vue libraries.

For example, if we have the following in `src/index.js`:

```
new Vue({  
  el: "#app",  
  data: {  
    foo: "bar"  
  },  
  beforeMount() {  
    console.log(this.$el.textContent);  
  }  
});
```

and the following in `index.html` :

```
<!DOCTYPE html>  
<html>  
  <head>  
    <title>Hello</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> 
  <body>  
    <div id="app">foo</div>  
    <script src="./src/index.js"></script>  
  </body>  
</html>
```

Then we get `foo` logged since we have `foo` in the `div` with ID `app` .

Updating Hooks
==============

Updating hooks are called when a reactive property used by our component changes or we some triggers re-rendering manually.

They’re useful for checking when a component is re-rendering.

However, we should use computed properties or watchers to track reactive property changes.

beforeUpdate
------------

`beforeUpdate` runs after data changes in our component, right before the DOM is updated and re-rendered.

It lets us get the new state before the DOM is re-rendered.

For example, if we have the following in `src/index.html` :

```
new Vue({  
  el: "#app",  
  data: {  
    foo: "bar"  
  },  
  beforeUpdate() {  
    console.log(this.foo);  
  },  
  methods: {  
    toggle() {  
      this.foo = this.foo === "bar" ? "baz" : "bar";  
    }  
  }  
});
```

and the following in `index.html` :

```
<!DOCTYPE html>  
<html>  
  <head>  
    <title>Hello</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> <body>  
    <div id="app">  
      <p>{{foo}}</p>  
      <button @click="toggle">Toggle</button>  
    </div>  
    <script src="./src/index.js"></script>  
  </body>  
</html>
```

Then when we click the Toggle button, we can see the value changes logged in the `console.log` call of the `beforeUpdate` method.

updated
-------

The `updated` hook runs after data changes on our Vue instance and the DOM re-renders.

For example, if we have the following in `src/index.js`:

```
new Vue({  
  el: "#app",  
  data: {  
    foo: "bar"  
  },  
  updated() {  
    console.log(this.$refs.foo.textContent);  
  },  
  methods: {  
    toggle() {  
      this.foo = this.foo === "bar" ? "baz" : "bar";  
    }  
  }  
});
```

and the following in `index.html` :

```
<!DOCTYPE html>  
<html>  
  <head>  
    <title>Hello</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> <body>  
    <div id="app">  
      <p ref="foo">{{foo}}</p>  
      <button @click="toggle">Toggle</button>  
    </div>  
    <script src="./src/index.js"></script>  
  </body>  
</html>
```

Then we can get the text content of the `p` element with `ref` set to `foo` by logging the value as follows:

```
console.log(this.$refs.foo.textContent);
```

in the `updated` hook and we can see the new value for it as we click the Toggle button.

Destruction Hooks
=================

These hooks are run when the Vue instance is destroyed. Therefore, we can run clean up code in there.

These hooks aren’t run during server-side rendering.

beforeDestroy
-------------

`beforeDestroy` is run before teardown. Our Vue instance is still present and functional.

Therefore, we can run our clean up code in here.

For example, we can use it as follows:

```
new Vue({  
  el: "#app",  
  data: {  
    foo: "bar"  
  },  
  beforeDestroy() {  
    this.foo = null;  
  }  
});
```

destroyed
---------

This is called after the Vue instance is destroyed. All the directives are unbound, event listeners are removed and child Vue instances are destroyed.

For example, we can use it as follows:

```
new Vue({  
  el: "#app",  
  data: {  
    foo: "bar"  
  },  
  destroyed() {  
    this.foo = null;  
  }  
});
```

Conclusion
==========

The lifecycle hooks are useful for doing things during the lifecycle of the Vue instance.

The creation hooks can be used to run any initialization code.

The mounting hooks are run when the Vue instance is being mounted into the DOM.

The update hooks whenever data of the Vue instance updates, and the destroy hooks are run when the Vue instance is being destroyed.