Lifecycle hooks in Vue are simply functions. The main purpose of hooks is to provide methods that initiate in a different point of time. Here are the lifecycle hooks method that are or we can use precisely when we develop web applications:
- init – init triggers right after the initialization of a specific instance.
- before Compile – initiates earlier/before compilation of a specific instance.
- ready – is a function that begins when an element is already loaded completely and is injected by an instance.
- compiled – as the term itself describes, initializes right after a complete compilation with respect to an available element.
- attached and detached – takes place when the element is attached to a specific DOM using directives or instance. On the other hand, detached is when the element is removed from the DOM or instance.
- created – this is a lifecycle hook that simultaneously work as instance is created.
- beforeDestroy / destroyed – functions before a specified instance is destroyed. On the other hand, the vice versa is destroyed which occurs after an instance is destroyed.
We can use these hooks right inside our instance similar to the code below.
To have a cleaner idea, let us take a look the diagram from vuejs.org.