Vue.js
Livscykelkrokar

Krokar till Vue 1.x

• init

  Ringas synkront efter att instansen har initialiserats och före någon första datainformation.

• created

  Ringas synkront efter att instansen har skapats. Detta inträffar före installationen av $el , men efter data observation har computed properties , watch/event callbacks och methods installerats.

• beforeCompile

  Omedelbart före sammanställningen av Vue-instansen.

• compiled

  Omedelbart efter att sammanställningen är klar. Alla directives är länkade men fortfarande innan $el är tillgängliga.

• ready

  Händer efter sammanställningen och $el är slutförda och instansen injiceras i DOM för första gången.

• attached

  Händer när $el är kopplad till DOM genom ett directive eller instans kallar $appendTo() .

• detached

  Ringas när $el tas bort / tas bort från DOM- eller instansmetoden.

• beforeDestroy

  Omedelbart innan Vue-instansen förstörs, men fortfarande är fullt funktionell.

• destroyed

  Kallas efter att en instans förstörs. Alla bindings och directives har redan varit obundna och barninstanser har också förstörts.

Använd i ett fall

Eftersom alla livscykelkrokar i Vue.js bara är functions kan du placera någon av dem direkt i instansdeklarationen.

//JS
new Vue({

    el: '#example',

    data: {
        ...
    },

    methods: {
        ...
    },

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

    ready: function() {
        ...
    }

});

Vanliga fallgropar: åtkomst till DOM från "klar ()" -kroken

Ett vanligt användningsområde för den ready() kroken är att komma åt DOM, t.ex. att initiera ett Javascript-plugin, få dimensionerna på ett element etc.

Problemet

På grund av Vues asynkrona DOM-uppdateringsmekanism är det inte garanterat att DOM har uppdaterats helt när den ready() kroken anropas. Detta resulterar vanligtvis i ett fel eftersom elementet är odefinierat.

Lösningen

För den här situationen kan $nextTick() hjälpa. Denna metod försvarar exekveringen av den medföljande återuppringningsfunktionen tills efter nästa fästing, vilket innebär att den avfyras när alla DOM-uppdateringar garanteras vara slutförda.

Exempel:

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