Component Lifecycle

[vue]

The lifecycle of a Vue component goes like this:

1. new Vue() is executed, starting the process
2. Events and Lifecycle initiate
3. beforeCreate() function executes
4. Injections and Reactiviti initiate
5. created() function executes
6. Template is compiled into a render function
7. beforeMount() is called
8. Template mounts to DOM by replacing el with vm.$el
9. mounted() function executes
10. The component is mounted
    • when data changes beforeUpdate() executes
    • Virtual DOM re-renders and patches
    • updated() executes
11. beforeDestroy() executes when vm.$destroy() is called
12. Watchers, children and event listeners get torn down
13. destroyed() executes