Full-Stack Vue.js 2 and Laravel 5

Figure 2.11. Vue.js lifecycle diagram Vue allows you to execute custom logic at these different steps via
lifecycle hooks, which are callbacks defined in the configuration object.
For example, here we utilize the beforeCreate and created hooks: 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 object after the beforeCreate hook is
called but before the created hook is called, hence why this.message is undefined in
the former.
The caveat I mentioned earlier about the Escape key listener is this: although
unlikely, if the Escape key was pressed and our callback was called before Vue
has proxied the data properties, app.modalOpen would be undefined rather than true
and so our if statement would not control flow like we expect.
To overcome this we can set up the listener in the created lifecycle hook that will
be called after Vue has proxied the data properties. This gives us a guarantee that
modalOpen will 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); } });