Lifecycle hooks

When your main script is run and your instance of Vue is set up, it goes through a series of initialization steps. As we said earlier, Vue will walk through your data objects and make them reactive, as well as compile the template and mount to the DOM. Later in the lifecycle, Vue will also go through updating steps, and later still, tear-down steps.

Here is a diagram of the lifecycle instance taken fromhttp://vuejs.org. Many of these steps concern concepts that we haven't yet covered, but you should get the gist:

Figure 2.11. Vue.js lifecycle diagram

Vue allows you to execute custom logic at these different steps vialifecycle hooks,which are callbacks defined in the configuration object.

For example, here we utilize thebeforeCreateandcreatedhooks:

new Vue({
  data: {
    message: 'Hello'
  },
  beforeCreate: function() {
    console.log('beforeCreate message: ' + this.message);
    // "beforeCreate message: undefined"
  },
  created: function() {
    console.log('created: '+ this.message);
    // "created message: Hello"
  },
});

Vue will alias data properties to the context objectafterthebeforeCreatehook is called butbeforethecreatedhook is called, hence whythis.messageisundefinedin the former.

The caveat I mentioned earlier about theEscapekey listener is this: although unlikely, if theEscapekey was pressed and our callback was calledbeforeVue has proxied the data properties,app.modalOpenwould beundefinedrather thantrueand so ourifstatement would not control flow like we expect.

To overcome this we can set up the listener in thecreatedlifecycle hook that will be calledafterVue has proxied the data properties. This gives us a guarantee thatmodalOpenwill be defined when the callback is run.

app.js:

function escapeKeyListener(evt) {
  if (evt.keyCode === 27 && app.modalOpen) {
    app.modalOpen = false;
  }
}

var app = new Vue({
  data: { ... },
  watch: { ... },
  created: function() {
    document.addEventListener('keyup', escapeKeyListener);
  }
});