[{"data":1,"prerenderedAt":254},["ShallowReactive",2],{"term-l\u002Flifecycle":3,"related-l\u002Flifecycle":237},{"id":4,"title":5,"acronym":6,"body":7,"category":218,"description":219,"difficulty":220,"extension":221,"letter":222,"meta":223,"navigation":94,"path":224,"related":225,"seo":231,"sitemap":232,"stem":235,"subcategory":6,"__hash__":236},"terms\u002Fterms\u002Fl\u002Flifecycle.md","Lifecycle",null,{"type":8,"value":9,"toc":212},"minimark",[10,15,19,23,26,30,201,205,208],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"The lifecycle is a component's life story — it's born (mounted), lives and updates (updates), then dies (unmounted). Frameworks give you hooks into these moments so you can run code at the right time, like fetching data when the component appears on screen.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Component lifecycle refers to the sequence of phases a component goes through: creation, mounting to the DOM, updating on state\u002Fprop changes, and unmounting. Lifecycle hooks let you execute code at specific phases — e.g., onMounted for initial data fetching or onUnmounted for cleanup.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Vue Composition API\nimport { onMounted, onUnmounted } from 'vue';\n\nonMounted(() => {\n  console.log('Component is live!');\n  startPolling();\n});\n\nonUnmounted(() => {\n  stopPolling();\n});\n","javascript","",[38,39,40,49,89,96,116,143,153,163,168,182,192],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Vue Composition API\n",[41,50,52,56,60,64,67,70,73,76,79,83,86],{"class":43,"line":51},2,[41,53,55],{"class":54},"s7zQu","import",[41,57,59],{"class":58},"sMK4o"," {",[41,61,63],{"class":62},"sTEyZ"," onMounted",[41,65,66],{"class":58},",",[41,68,69],{"class":62}," onUnmounted",[41,71,72],{"class":58}," }",[41,74,75],{"class":54}," from",[41,77,78],{"class":58}," '",[41,80,82],{"class":81},"sfazB","vue",[41,84,85],{"class":58},"'",[41,87,88],{"class":58},";\n",[41,90,92],{"class":43,"line":91},3,[41,93,95],{"emptyLinePlaceholder":94},true,"\n",[41,97,99,103,106,109,113],{"class":43,"line":98},4,[41,100,102],{"class":101},"s2Zo4","onMounted",[41,104,105],{"class":62},"(",[41,107,108],{"class":58},"()",[41,110,112],{"class":111},"spNyl"," =>",[41,114,115],{"class":58}," {\n",[41,117,119,122,125,128,131,133,136,138,141],{"class":43,"line":118},5,[41,120,121],{"class":62},"  console",[41,123,124],{"class":58},".",[41,126,127],{"class":101},"log",[41,129,105],{"class":130},"swJcz",[41,132,85],{"class":58},[41,134,135],{"class":81},"Component is live!",[41,137,85],{"class":58},[41,139,140],{"class":130},")",[41,142,88],{"class":58},[41,144,146,149,151],{"class":43,"line":145},6,[41,147,148],{"class":101},"  startPolling",[41,150,108],{"class":130},[41,152,88],{"class":58},[41,154,156,159,161],{"class":43,"line":155},7,[41,157,158],{"class":58},"}",[41,160,140],{"class":62},[41,162,88],{"class":58},[41,164,166],{"class":43,"line":165},8,[41,167,95],{"emptyLinePlaceholder":94},[41,169,171,174,176,178,180],{"class":43,"line":170},9,[41,172,173],{"class":101},"onUnmounted",[41,175,105],{"class":62},[41,177,108],{"class":58},[41,179,112],{"class":111},[41,181,115],{"class":58},[41,183,185,188,190],{"class":43,"line":184},10,[41,186,187],{"class":101},"  stopPolling",[41,189,108],{"class":130},[41,191,88],{"class":58},[41,193,195,197,199],{"class":43,"line":194},11,[41,196,158],{"class":58},[41,198,140],{"class":62},[41,200,88],{"class":58},[11,202,204],{"id":203},"when-youll-hear-this","When You'll Hear This",[16,206,207],{},"\"Fetch the data in the mounted lifecycle hook, not in the template.\" \u002F \"Clean up your event listeners in onUnmounted or you'll get memory leaks.\"",[209,210,211],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":213},[214,215,216,217],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":203,"depth":51,"text":204},"frontend","The lifecycle is a component's life story — it's born (mounted), lives and updates (updates), then dies (unmounted).","intermediate","md","l",{},"\u002Fterms\u002Fl\u002Flifecycle",[226,227,228,229,230],"Hook","Component","State","Composable","Hydration",{"title":5,"description":219},{"changefreq":233,"priority":234},"weekly",0.7,"terms\u002Fl\u002Flifecycle","ucD8EJfz1DOEofk5xjvvBc-zkAfp0EJzg4BFBBmEwXU",[238,242,245,248,251],{"title":227,"path":239,"acronym":6,"category":218,"difficulty":240,"description":241},"\u002Fterms\u002Fc\u002Fcomponent","beginner","A component is a self-contained LEGO brick for your UI.",{"title":229,"path":243,"acronym":6,"category":218,"difficulty":220,"description":244},"\u002Fterms\u002Fc\u002Fcomposable","Composables are Vue's version of React hooks — reusable functions that bundle reactive state and logic together.",{"title":226,"path":246,"acronym":6,"category":218,"difficulty":220,"description":247},"\u002Fterms\u002Fh\u002Fhook","Hooks are special functions in React that let function components use superpowers like state and lifecycle that used to be class-only.",{"title":230,"path":249,"acronym":6,"category":218,"difficulty":220,"description":250},"\u002Fterms\u002Fh\u002Fhydration","Hydration is when a server-rendered HTML page comes alive in the browser.",{"title":228,"path":252,"acronym":6,"category":218,"difficulty":240,"description":253},"\u002Fterms\u002Fs\u002Fstate","State is a component's memory — data that can change over time and causes the UI to update when it does. Think of a counter: the number is state.",1776518292163]