Vue.js
Ganchos de ciclo de vida

Ganchos para vue 1.x

• init

  Se llama de forma síncrona después de que la instancia se haya inicializado y antes de cualquier observación de datos inicial.

• created

  Llamado sincrónicamente después de que se crea la instancia. Esto ocurre antes de la configuración de $el , pero después de data observation , las computed properties , las watch/event callbacks y los methods se han configurado.

• beforeCompile

  Inmediatamente antes de la compilación de la instancia de Vue.

• compiled

  Inmediatamente después de completada la compilación. Todas las directives están vinculadas pero aún antes de que $el esté disponible.

• ready

  Ocurre después de que la compilación y $el se completan y la instancia se inyecta en el DOM por primera vez.

• attached

  Ocurre cuando $el se adjunta al DOM por una directive o instancia llama a $appendTo() .

• detached

  Se llama cuando $el se elimina / se separa del DOM o método de instancia.

• beforeDestroy

  Inmediatamente antes de que se destruya la instancia de Vue, todavía es completamente funcional.

• destroyed

  Llamado después de que se destruye una instancia. Todas las bindings y directives ya se han liberado y las instancias secundarias también se han destruido.

Usando en una instancia

Dado que todos los ganchos de ciclo de vida en Vue.js son solo functions , puede colocar cualquiera de ellos directamente en la instancia declaraction.

//JS
new Vue({

    el: '#example',

    data: {
        ...
    },

    methods: {
        ...
    },

    //LIFECYCLE HOOK HANDLING
    created: function() {
        ...
    },

    ready: function() {
        ...
    }

});

Errores comunes: Acceso a DOM desde el enlace `ready ()`

Un caso de uso común para el enlace ready() es acceder al DOM, por ejemplo, para iniciar un complemento de Javascript, obtener las dimensiones de un elemento, etc.

El problema

Debido al mecanismo asíncrono de actualización de DOM de Vue, no se garantiza que el DOM se haya actualizado completamente cuando se llame al gancho ready() . Esto generalmente resulta en un error porque el elemento no está definido.

La solución

Para esta situación, el método de instancia $nextTick() puede ayudar. Este método difiere la ejecución de la función de devolución de llamada proporcionada hasta después del siguiente tick, lo que significa que se activa cuando se garantiza que todas las actualizaciones de DOM finalizarán.

Ejemplo:

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