Among these, life cycle hooks are special because they provide you with the ability to define logic for different stages during the instance's life cycle. Here are all life cycle hooks, listed from the first stage to the end:

• beforeCreate: Called after the instance's internal events and life cycle state have been initialized.
• created: Called after the instance's injections and reactivity system have been initialized. At this stage, the instance is functional, except the DOM hasn't been updated and users cannot see anything on the UI.
• beforeMount: Called after Vue.js finishes template compilation and is ready to render the generated DOM.
• mounted: Called after the DOM has been updated. At this point, users can interact with the UI, and the instance is fully functional.
• beforeUpdate: Called after the data changes and before the DOM is updated. In this hook, you can still perform changes to the data and they will not trigger additional DOM updates.
• updated: Called after the DOM has been updated based on the data changes.
• activated: Called when a kept-alive component is activated.
• deactivated: Called when a kept-alive component is deactivated.
• beforeDestroy: Called before the instance is destroyed. At this stage, the instance is still fully functional.
• destroyed: Called after the instance has been destroyed. At this stage, all of the directives of the instance have been unbound, all event listeners have been removed, and all of the children Vue instances have been destroyed.
• errorCaptured: Called whenever an error from any descendent component is captured.

Besides adding logic to life cycle, hooks, they are great ways of inspecting how Vue.js manage components' life cycles. It will help you understand how Vue.js works better. You can add hooks to the Messages App's components to try it out.