This PPT comprises of the life-cycle hooks of Vue.

1. Life Cycle Hooks in VueJS
Presenter:
Abaya Rajashree A
Software Engineer

2. List of hooks:
● beforeCreate
● Created
● beforeMount
● Mounted
● beforeUpdate
● Updated
● beforeDestroy
● Destroyed

3. beforeCreate()
● First hook that gets called after
the Vue instance has been
initialized.
● Cannot interact with any parts of
the component as data
observation (reactivity), events,
computed properties and
watchers are yet to be set up.

4. created()
● This hook is called after the instance is
created.
● Now, the instance has finished
processing, data observation
(reactivity), computed properties,
methods, watchers and event
callbacks have been set up.
● Cannot interact with the DOM at this
stage because your component has
not been mounted.

5. beforeMount()
● At this stage, the template is
compiled(not rendered), either
from the template or render
options.
● This hook is not called during
server-side rendering.

6. mounted()
● Called after the instance has been
mounted
● The component becomes fully
functional after the mounted hook
is called and we can fully interact
with it.

7. beforeUpdate()
● Called anytime changes are made
to our data and the DOM needs to
be updated, right before the DOM
is patched.
● This is a good place to access the
existing DOM before an update.

8. updated()
● It is fired after a change has been
made.
● Component’s DOM would have
been updated when this hook is
called, so you can perform DOM-
dependent operations here.

9. beforeDestroy()
● Called right before a Vue instance
is destroyed.
● At this stage the instance is still
fully functional.
● This hook is not called during
server-side rendering.

10. destroyed()
● Called after a Vue instance has
been destroyed.
● All directives of the Vue instance
have been unbound, all event
listeners have been removed, and
all child Vue instances have also
been destroyed.

11. Flow Diagram: Life Cycle Hooks(flow)

12. Reference links
● https://vuejs.org/v2/guide/instance.
html#Lifecycle-Diagram
● https://dev.to/samolabams/underst
anding-vuejs-lifecycle-hooks-5ejk

13. Thank You!