Vue.js Lifecycle Hooks Hooks for Vue 1.x


Example

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