Lifecycle hooks ਤੁਹਾਨੂੰ ਇੱਕ component ਦੀ ਜ਼ਿੰਦਗੀ ਦੇ ਖਾਸ ਪਲਾਂ ਵਿੱਚ ਕੋਡ ਚਲਾਉਣ ਦੀ ਇਜ਼ਾਜ਼ਤ ਦਿੰਦੇ ਹਨ — ਸਿਰਜਣਾ, DOM ਤੋਂ mount ਕਰਨਾ, ਅੱਪਡੇਟ ਕਰਨਾ, ਅਤੇ ਹਟਾਉਣਾ। Composition API ਵਿੱਚ ਇਹ ਫੰਕਸ਼ਨ ਹਨ ਜੋ ਤੁਸੀਂ setup ਦੇ ਅੰਦਰ ਕਾਲ ਕਰਦੇ ਹੋ।
ਕ੍ਰਮ ਵਿੱਚ ਮੁੱਖ hooks
vue
<script setup>
import { onMounted, onUpdated, onUnmounted, ref } from "vue";
const data = ref(null);
onMounted(() => {
// component is now in the DOM — fetch data, access elements, init libraries
fetchData().then(d => (data.value = d));
});
onUpdated(() => {
// runs after the DOM re-renders due to a reactive change
});
onUnmounted(() => {
// component is being removed — CLEAN UP here
clearInterval(timer);
window.removeEventListener("resize", handler);
});
</script>