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
}