Component का Lifecycle
Lifecycle hooks वे functions हैं जिन्हें Vue key moments पर call करता है: एक component बनना, mount होना, update होना, और destroy होना।
In this page:
Syntax
export default {
created() { },
mounted() { },
updated() { },
beforeUnmount() { },
unmounted() { }
}Component Lifecycle
Hooks में created, mounted, updated, beforeUnmount, और unmounted शामिल हैं (setup सबसे पहले वाले phase को cover करता है)। mounted DOM touch करने या timers शुरू करने की जगह है, और unmounted या beforeUnmount वह जगह है जहाँ आप clean up करते हैं।
Vue 3 में Options names beforeDestroy और destroyed का नाम बदल गया।
Note:
memory leaks से बचने के लिए beforeUnmount में timers और listeners clean up करें।
उदाहरण: Component lifecycle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
const log = [];
const app = Vue.createApp({
data() { return { msg: "hi" }; },
created() { log.push("created"); },
beforeMount() { log.push("beforeMount"); },
mounted() { log.push("mounted"); this.msg = "changed"; },
updated() { log.push("updated"); },
beforeUnmount() { log.push("beforeUnmount"); },
unmounted() { log.push("unmounted"); },
});
app.mount("#app");
Vue.nextTick(() => { app.unmount(); console.log(log.join(" -> ")); });
</script>
</body>
</html>
<!-- Output:
console: created -> beforeMount -> mounted -> updated -> beforeUnmount -> unmounted
-->Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- created में DOM access करना
- intervals clean up न करना
- Vue 2 hook names इस्तेमाल करना
चैप्टर सारांश
- created mount होने से पहले चलता है
- mounted DOM insertion के बाद चलता है
- updated re-render के बाद चलता है
- unmounted cleanup के लिए है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: