Lifecycle hooks are a window into how the library you are using works behind the scenes. Lifecycle hooks allow you to know when your component is created, added to the DOM, updated, or destroyed.
This article will introduce you to the creation, mounting, updating, and destruction hooks in Vue.js.
To follow through this tutorial, you’ll need:
Creation hooks are the first hooks that run in your component. They allow you to perform actions before your component has even been added to the DOM. Unlike any of the other hooks, creation hooks are also run during server-side rendering.
Use creation hooks if you need to set things up in your component, both during client rendering and server rendering.
You will not have access to the DOM or the target mounting element (this.$el
) inside of creation hooks.
beforeCreate
The beforeCreate
hook runs at the initialization of your component - data
has not been made reactive, and events
have not been set up yet:
<script>
export default {
beforeCreate() {
console.log('At this point, events and lifecycle have been initialized.')
}
}
</script>
In this example, when the beforeCreate
hook is run, this snippet will log the message:
OutputAt this point, events and lifecycle have been initialized.
created
The created
hook runs before the templates and Virtual DOM have been mounted or rendered - you are able to access reactive data
and events
that are active:
<template>
<div ref="example-element">{{ propertyComputed }}</div>
</template>
<script>
export default {
data() {
return {
property: 'Example property.'
}
},
computed: {
propertyComputed() {
return this.property
}
},
created() {
console.log('At this point, this.property is now reactive and propertyComputed will update.')
this.property = 'Example property updated.'
}
}
</script>
In this example, the snippet will store property
as Example property
. When the created
hook is run, it will log a message:
OutputAt this point, this.property is now reactive and propertyComputed will update.
And then property
is changed to Example property updated
.
Later in the lifecycle,{{ propertyComputed }}
will appear as Example property updated
instead of Example property
.
In this step, you reviewed some examples of creation hooks and are ready to move to the next part of the lifecycle, mounting hooks.
Mounting hooks are often the most used hooks. They allow you to access your component immediately before and after the first render. They do not, however, run during server-side rendering.
Use mounting hooks if you need to access or modify the DOM of your component immediately before or after the initial render.
Do not use mounting hooks if you need to fetch some data for your component on initialization.
Note: Use created
(or created
and activated
for keep-alive
components) for this instead. Especially if you need that data during server-side rendering.
beforeMount
The beforeMount
hook runs right before the initial render happens and after the template or render functions have been compiled:
<script>
export default {
beforeMount() {
console.log(`At this point, vm.$el has not been created yet.`)
}
}
</script>
In this example, when the beforeMount
hook is run, this snippet will log the message:
OutputAt this point, vm.$el has not been created yet.
mounted
In the mounted
hook, you will have full access to the reactive component, templates, and rendered DOM (via this.$el
).
Use mounted
for modifying the DOM—particularly when integrating non-Vue libraries:
<template>
<div ref="example-element">Example component.</div>
</template>
<script>
export default {
mounted() {
console.log(`At this point, vm.$el has been created and el has been replaced.`);
console.log(this.$el.textContent) // Example component.
}
}
</script>
In this example, when the mounted
hook is run, this snippet will log the message:
OutputAt this point, vm.$el has been created and el has been replaced.
In addition, a message of Example content.
(this.$el.textContent
) will be logged.
In this section, you explored use-cases for mounting hooks. In the next step, you review some examples that use updating hooks.
Updating hooks are called whenever a reactive property used by your component changes or something else causes it to re-render. They allow you to hook into the watch-compute-render cycle for your component.
Use updating hooks if you need to know when your component re-renders, perhaps for debugging or profiling.
Do not use updating hooks if you need to know when a reactive property on your component changes. Use computed properties or watchers for that instead.
beforeUpdate
The beforeUpdate
hook runs after data changes on your component and the update cycle begins, right before the DOM is patched and re-rendered.
Use beforeUpdate
if you need to get the new state of any reactive data on your component before it gets rendered:
<template>
<div ref="example-element">{{counter}}</div>
</template>
<script>
export default {
data() {
return {
counter: 0
}
},
created() {
setInterval(() => {
this.counter++
}, 1000)
},
beforeUpdate() {
console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
// Logs the counter value every second, before the DOM updates.
console.log(this.counter)
}
}
</script>
First, this snippet will store counter
as 0
. When the created
hook is run, it will increment counter
every 1000
ms. When the beforeUpdate
hook is run, this snippet will log the message:
OutputAt this point, Virtual DOM has not re-rendered or patched yet.
And a number for counter
is also logged.
updated
The updated
hook runs after data changes on your component and the DOM re-renders.
Use updated
if you need to access the DOM after a property change:
<template>
<div ref="example-element">{{counter}}</div>
</template>
<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.$refs['example-element'].textContent === this.counter)
}
}
</script>
First, this snippet will store counter
as 0
. When the created
hook is run, it will increment counter
every 1000
ms. When the updated
hook is run, this snippet will log the message:
OutputAt this point, Virtual DOM has re-rendered and patched.
And a boolean value of true
is logged because the rendered value and current value are equal.
Now that you’ve explored the use of updating hooks, you are ready to learn about destruction hooks.
Destruction hooks allow you to perform actions when your component is destroyed, such as cleanup or analytics sending. They fire when your component is being torn down and removed from the DOM.
beforeDestroy
beforeDestroy
is fired right before teardown. Your component will still be fully present and functional.
Use beforeDestroy
if you need to clean up events or reactive subscriptions:
<script>
export default {
data() {
return {
exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'
}
},
beforeDestroy() {
console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
// Perform the teardown procedure for exampleLeakyProperty.
// (In this case, effectively nothing)
this.exampleLeakyProperty = null
delete this.exampleLeakyProperty
}
}
</script>
This snippet will first store exampleLeakyProperty
. When the beforeDestroy
hook is run, this snippet will log the message:
OutputAt this point, watchers, child components, and event listeners have not been torn down yet.
And then exampleLeakyProperty
is deleted.
destroyed
By the time you reach the destroyed
hook, there’s practically nothing left on your component. Everything that was attached to it has been destroyed.
Use destroyed
if you need to do any last-minute cleanup or inform a remote server that the component was destroyed:
<script>
import ExampleAnalyticsService from './example-analytics-service'
export default {
destroyed() {
console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
console.log(this)
ExampleAnalyticsService.informService('Component destroyed.')
}
}
</script>
First, this snippet will import ExampleAnalyticsService
. When the beforeDestroy
hook is run, this snippet will log the message:
OutputAt this point, watchers, child components, and event listeners have been torn down.
What remains of the component will be logged to console, and ExampleAnalyticsService
will be passed the message Component destroyed.
.
With that, you have completed your general review of the Vue.js lifecycle hooks.
There are two other hooks, activated
and deactivated
. These are for keep-alive
components, a topic that is outside the scope of this article.
Suffice it to say that they allow you to detect when a component that is wrapped in a <keep-alive></keep-alive>
tag is toggled on or off. You might use them to fetch data for your component or handle state changes, effectively behaving as created
and beforeDestroy
without the need to do a full component rebuild.
In this article, you were introduced to different lifecycle hooks available in the Vue.js Instance Lifecycle. You explored the different use cases for creation hooks, mounting hooks, updating hooks, and destruction hooks.
If you’d like to learn more about Vue.js, check out our Vue.js topic page for exercises and programming projects.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
This comment has been deleted
I do not quite understand the difference in “events”'s functionality state between “beforeCreate” and “created” hooks. At the first stage the events are “initialized” and at the second stage they are “active” - what does this really mean? Can I use “this.$emit”, for example, in the “beforeCreate” hook? It feels that no, I cannot since the instance hasn’t been created yet, but in such a case why would the docs mention the seemingly useless “event initialization” at the “beforeCreate” stage?
On the oher hand, if we look at “lifecycle hooks” functionality that is stated to be “initialized” at the “beforeCreate” stage too - it becomes fully functional since the very first hook gets executed…I am puzzled with such wording - “initialized” / “active”…