Lifecycle Hooks

Hooks for Vue 1.x

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

• created
  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.

• beforeCompile
  Immediately prior to compilation of the Vue instance.

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

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

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

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

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

• destroyed
  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.

//JS
new Vue({

    el: '#example',

    data: {
        ...
    },

    methods: {
        ...
    },

    //LIFECYCLE HOOK HANDLING
    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.

Example:

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.
    })
  }
}