Vue.js
Крючки жизненного цикла

Крючки для Vue 1.x

• init

  Вызывается синхронно после того, как экземпляр был инициализирован и до любого начального наблюдения данных.

• created

  Вызывается синхронно после создания экземпляра. Это происходит до установки $el , но после data observation computed properties , watch/event callbacks и methods .

• beforeCompile

  Непосредственно перед компиляцией экземпляра Vue.

• compiled

  Сразу после завершения компиляции. Все directives связаны, но все еще до появления $el .

• ready

  Происходит после компиляции и $el завершаются, и экземпляр вводится в DOM впервые.

• attached

  Возникает, когда $el привязывается к DOM directive или экземпляром, вызывает $appendTo() .

• detached

  Вызывается, когда $el удаляется / удаляется из метода DOM или экземпляра.

• beforeDestroy

  Непосредственно перед тем, как экземпляр Vue будет уничтожен, но все еще полностью работоспособен.

• destroyed

  Вызывается после уничтожения экземпляра. Все bindings и directives уже были несвязаны, а дочерние экземпляры также были уничтожены.

Использование в экземпляре

Поскольку все крюки в течение жизненного цикла Vue.js являются только functions , вы можете поместить любого из них непосредственно в экземпляре declaraction.

//JS
new Vue({

    el: '#example',

    data: {
        ...
    },

    methods: {
        ...
    },

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

    ready: function() {
        ...
    }

});

Общие ошибки: доступ к DOM с помощью `ready ()` hook

Обычным способом использования ready() является доступ к DOM, например, для запуска плагина Javascript, получения размеров элемента и т. Д.

Эта проблема

Из-за асинхронного механизма обновления DOM Vue не гарантируется, что DOM полностью обновляется при вызове hook ready() . Обычно это приводит к ошибке, поскольку элемент не определен.

Решение

Для этой ситуации метод $nextTick() может помочь. Этот метод отменяет выполнение предоставленной функции обратного вызова до следующего тика, что означает, что он запускается, когда все обновления DOM гарантированно завершены.

Пример:

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