Vue.js
Haki cyklu życia

Haczyki do Vue 1.x

• init

  Wywoływane synchronicznie po zainicjowaniu instancji i przed początkową obserwacją danych.

• created

  Wywoływany synchronicznie po utworzeniu instancji. Dzieje się tak przed konfiguracją $el , ale po data observation , skonfigurowanych computed properties , watch/event callbacks oraz methods .

• beforeCompile

  Bezpośrednio przed kompilacją instancji Vue.

• compiled

  Natychmiast po zakończeniu kompilacji. Wszystkie directives są powiązane, ale jeszcze przed udostępnieniem $el .

• ready

  Występuje po zakończeniu kompilacji i $el a instancja jest wstrzykiwana do DOM po raz pierwszy.

• attached

  Występuje, gdy $el jest dołączony do DOM przez directive lub instancja wywołuje $appendTo() .

• detached

  Wywoływany, gdy $el jest usuwany / odłączany od DOM lub metody instancji.

• beforeDestroy

  Tuż przed zniszczeniem instancja Vue jest nadal w pełni funkcjonalna.

• destroyed

  Wywoływany po zniszczeniu instancji. Wszystkie bindings i directives zostały już niezwiązane, a instancje potomne również zostały zniszczone.

Używanie w instancji

Ponieważ wszystkie haki cyklu życia w Vue.js są tylko functions , możesz umieścić dowolny z nich bezpośrednio w deklaracji instancji.

//JS
new Vue({

    el: '#example',

    data: {
        ...
    },

    methods: {
        ...
    },

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

    ready: function() {
        ...
    }

});

Typowe pułapki: Uzyskiwanie dostępu do DOM z haka `ready ()`

Częstym przykładem ready() hooka ready() jest dostęp do DOM, np. W celu zainicjowania wtyczki Javascript, uzyskania wymiarów elementu itp.

Problem

Ze względu na asynchroniczny mechanizm aktualizacji DOM Vue nie ma gwarancji, że DOM został w pełni zaktualizowany po wywołaniu hooka ready() . Zwykle powoduje to błąd, ponieważ element jest niezdefiniowany.

Rozwiązanie

W tej sytuacji może pomóc metoda instancji $nextTick() . Ta metoda odracza wykonanie udostępnionej funkcji zwrotnej do następnego tiku, co oznacza, że jest uruchamiana, gdy wszystkie aktualizacje DOM mają zagwarantowane zakończenie.

Przykład:

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