Cacher is the code snippet organizer for pro developers

Vue Instance Diagram - https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Named functions that occur throughout the lifecycle of the instance

Creation Lifecycle Hooks (Initialization)

Note: You will not have access to the DOM or the target mounting element (this.$el) inside of creation hooks

1. beforeCreate()

   1. Runs at the initialization of component
   2. Observes data and initialization events
   3. data is NOT reactive
   4. Events that occur during the component's lifecycle have not been set up

2. created()

   1. Invoked once Vue has set up events and data observation
   2. Events are active
   3. Access to reactive data is enabled, although templates have not been mounted or rendered

Mounting Hooks (DOM insertion)

Allow access to your component immediately before and after the first render

1. beforeMount()

   1. Allows access to component immediately before and after first render
   2. this.$el is yet to be created

2. mounted()

   1. Most used hook
   2. Gives you full access to reactive component, templates, and rendered DOM (via this.$el)
   3. Most frequently used pattern is fetching data for your component

Updating Hooks (Diff and Re-render)

Updating hooked are called whenever a reactive property used by your component changes, or something else causes it to re-render

1. beforeUpdate()

   1. Runs after data changes on your component and the update cycle begins, right before the DOM is patched and re-rendered

2. updated()

   1. Runs after data changes on component and the DOM re-renders

Destruction Hooks (Teardown)

Allow you to perform actions when component is destroyed, such as cleanup or analytics sending

1. beforeDestroy()

   1. Fired right before teardown
   2. If you need to cleanup events or reactive subscriptions, here is the time to do it
   3. Component will still be fully present and functional

2. destroyed()

   1. Called after your component has been destroyed
   2. Directives have been unbound
   3. Event listeners removed