Questions And Answers

More Tutorials

VueJs Lifecycle Hooks


Hooks for Vue 1.x

Called synchronously after the instance has been initialized and prior to any initial data observation.

Called synchronously after the instance is created. This occurs prior to $el setup, but after data observation, computed properties, watch/event callbacks, and methods have been setup.

Immediately prior to compilation of the Vue instance.

Immediately after compilation has completed. All directives are linked but still prior to $el
being available.

Occurs after compilation and $el are complete and the instance is injected into the DOM for
the first time.

Occurs when $el is attached to the DOM by a directive or instance calls $appendTo().

Called when $el is removed/detached from the DOM or instance method.

Immediately before the Vue instance is destroyed, but is still fully functional.

Called after an instance is destroyed. All bindings and directives have already been unbound and child instances have also been destroyed.

Using in an Instance

Since all lifecycle hooks in Vue.js are just functions, you can place any of them directly in the instance declaraction.
new Vue({
 el: '#example',
 data: {
 methods: {
 created: function() {
 ready: function() {

Common Pitfalls: Accessing DOM from the `ready()` hook

A common usecase for the ready() hook is to access the DOM, e.g. to initiate a Javascript plugin, get the dimensions of an element etc.

The problem

Due to Vue's asynchronous DOM update mechanism, it's not guaranteed that the DOM has been fully updated when the ready() hook is called. This usually results in an error because the element is undefined.

The Solution

For this situation, the $nextTick() instance method can help. This method defers the execution of the provided callback function until after the next tick, which means that it is fired when all DOM updates are guaranteed to be finished.


module.exports {
 ready: function () {
 $('.cool-input').initiateCoolPlugin() //fails, because element is not in DOM yet.
 this.$nextTick(function() {
 $('.cool-input').initiateCoolPlugin() // this will work because it will be executed
after the DOM update.


In this page (written and validated by ) you learned about VueJs Lifecycle Hooks . What's Next? If you are interested in completing VueJs tutorial, your next topic will be learning about: VueJs List Rendering.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.