Vue.js Lifecycle Hooks

Understanding Vue component lifecycle

Creation Hooks

beforeCreate() { # before instance created
    // data not available yet
}
created() { # instance created
    // data available, not mounted
}

Mounting Hooks

beforeMount() { # before mounting
    // template compiled, not rendered
}
mounted() { # component mounted
    // DOM available, can access $el
}

Update Hooks

beforeUpdate() { # before re-render
    // data changed, DOM not updated
}
updated() { # after re-render
    // DOM updated with new data
}

Destruction Hooks

beforeUnmount() { # before unmounting (Vue 3)
    // cleanup timers, listeners
}
unmounted() { # component unmounted
    // component destroyed
}

Composition API Hooks

import { onMounted, onUnmounted } from 'vue';
setup() {
    onMounted(() => { }); # mounted hook
    onUnmounted(() => { }); # unmounted hook
}