Each Vue instance goes through series of steps when they are created, mounted and destroyed. Along the way, it will also runs functions called life cycle hooks, giving us the opportunity to add our own code at specific stage. Below are the events, a Vue instance goes through.
beforeCreate — The first hook in the creation hooks. They allow us to perform actions before our component has even been added to the DOM. We do not have access to the DOM inside of this.
created — This hook can be used to run code after an instance is created. We can access the reactive data. But templates and Virtual DOM have not yet been mounted or rendered.
beforeMount — The beforeMount hook runs right before the initial render happens and after the template or render functions have been compiled. Most likely we’ll never need to use this hook.
mounted — We will have full access to the reactive component, templates, and rendered DOM. This is the most frequently used hook.
beforeUpdate — This hook runs after data changes on our component and the update cycle begins. But runs right before the DOM is patched and re-rendered.
updated — This hook runs after data changes on our component and the DOM re-renders. If we need to access the DOM after a property change, here is probably the safest place to do it.
beforeDestroy — This hook will run right before tearing down the instance. If we need to clean up events or reactive subscriptions, this is the right place to do it.
destroyed — This hook will be used to do any last minute clean up.