--- title: "Lifecycle Line-up · vuejs.school" description: "Put the lifecycle hooks in the order Vue fires them. Mount, update and unmount, parent and child, watchers and nextTick. Arrange the cards, then watch the real sequence play." canonical_url: "https://vuejs.school/games/lifecycle" meta: "og:description": "Put the lifecycle hooks in the order Vue fires them. Mount, update and unmount, parent and child, watchers and nextTick. Arrange the cards, then watch the real sequence play." "og:image": "https://vuejs.school/_og/d/a_~TGlmZWN5Y2xlIExpbmUtdXAgwrcgdnVlanMuc2Nob29s%2Cc_OgCard.takumi%2Ctitle_Lifecycle%2BLine-up%2Cdescription_Put%2Bthe%2Blifecycle%2Bhooks%2Bin%2Bthe%2Border%2BVue%2Bfires%2Bthem.%2Ceyebrow_~R2FtZXMgwrcgT3JkZXJpbmcgcHV6emxl%2Ctint_lilac%2Cp_Ii9nYW1lcy9saWZlY3ljbGUi%2Cs_Od0s_Mvqgqx-3YFU.png" "og:image:alt": "Lifecycle Line-up · vuejs.school" "og:image:height": "600" "og:image:type": image/png "og:image:width": "1200" "og:title": "Lifecycle Line-up · vuejs.school" "twitter:image": "https://vuejs.school/_og/d/a_~TGlmZWN5Y2xlIExpbmUtdXAgwrcgdnVlanMuc2Nob29s%2Cc_OgCard.takumi%2Ctitle_Lifecycle%2BLine-up%2Cdescription_Put%2Bthe%2Blifecycle%2Bhooks%2Bin%2Bthe%2Border%2BVue%2Bfires%2Bthem.%2Ceyebrow_~R2FtZXMgwrcgT3JkZXJpbmcgcHV6emxl%2Ctint_lilac%2Cp_Ii9nYW1lcy9saWZlY3ljbGUi%2Cs_Od0s_Mvqgqx-3YFU.png" "twitter:image:alt": "Lifecycle Line-up · vuejs.school" --- > Index of every page on this site: [llms.txt](https://vuejs.school/llms.txt) **Ordering puzzle · 7 levels** # **Lifecycle Line-up** Put the lifecycle hooks in the order Vue fires them. Mount, update and unmount, parent and child, watchers and nextTick. Arrange the cards, then watch the real sequence play. [**Start level 1**](https://vuejs.school/games/lifecycle/1) 1. **1****Read the scene.** A component tree and one event: the page loads, a click updates it, a child is removed. 2. **2****Build the timeline.** Tap the hook cards in the order Vue fires them, or drag them into place. Some cards are decoys that never fire. 3. **3****Check it.** A wrong slot tells you whether that hook fires earlier or later. When it is right, the real sequence replays. ## **Levels** 0 of 7 done · play in order, or jump to any level - [**App.vue ****Level 1 of 7****One component mounts** The page loads. In which order do setup, a watchEffect and the two mount hooks run?**setup, watchEffect, onBeforeMount and onMounted****4 cards**Up next**Play** Play: Level 1, One component mounts, teaches setup, watchEffect, onBeforeMount and onMounted, up next](https://vuejs.school/games/lifecycle/1) - [**App.vue ****Child.vue ****Level 2 of 7****Parent and child mount** App renders a Child. The child finishes mounting before its parent does.**mount order across a tree****6 cards**Not started**Play** Play: Level 2, Parent and child mount, teaches mount order across a tree, not started](https://vuejs.school/games/lifecycle/2) - [**App.vue ****Header.vue ****Footer.vue ****Level 3 of 7****Two children mount** App renders a Header and a Footer. Both are set up before either is mounted.**siblings are set up first, mounted together****9 cards**Not started**Play** Play: Level 3, Two children mount, teaches siblings are set up first, mounted together, not started](https://vuejs.school/games/lifecycle/3) - [**App.vue ****Level 4 of 7****A click updates the page** count changes. A watcher, the update hooks and a nextTick callback all react. One card never fires again.**watch, onBeforeUpdate, onUpdated and nextTick****5 cards****decoys**Not started**Play** Play: Level 4, A click updates the page, teaches watch, onBeforeUpdate, onUpdated and nextTick, not started](https://vuejs.school/games/lifecycle/4) - [**App.vue ****Child.vue ****Level 5 of 7****Parent and child update** App passes count to Child as a prop, and both render it. Setup does not run again.**update order across a tree****5 cards****decoys**Not started**Play** Play: Level 5, Parent and child update, teaches update order across a tree, not started](https://vuejs.school/games/lifecycle/5) - [**App.vue ****Child.vue ****Grandchild.vue ****Level 6 of 7****v-if removes the child** App hides Child, which has a Grandchild. Tear-down happens inside App's update, deepest unmount first.**unmount order inside an update****7 cards****decoys**Not started**Play** Play: Level 6, v-if removes the child, teaches unmount order inside an update, not started](https://vuejs.school/games/lifecycle/6) - [**App.vue ****Child.vue ****Level 7 of 7****KeepAlive hides the child** Child sits inside \. Hiding it deactivates it instead of unmounting. Two cards never fire.**onDeactivated instead of unmounting****5 cards****decoys**Not started**Play** Play: Level 7, KeepAlive hides the child, teaches onDeactivated instead of unmounting, not started](https://vuejs.school/games/lifecycle/7) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://vuejs.school/#website","@type":"WebSite","description":"A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you.","name":"vuejs.school","url":"https://vuejs.school/","publisher":{"@id":"https://vuejs.school/#identity"}},{"@id":"https://vuejs.school/games/lifecycle#webpage","@type":"WebPage","description":"Put the lifecycle hooks in the order Vue fires them. Mount, update and unmount, parent and child, watchers and nextTick. Arrange the cards, then watch the real sequence play.","name":"Lifecycle Line-up","url":"https://vuejs.school/games/lifecycle","isPartOf":{"@id":"https://vuejs.school/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://vuejs.school/games/lifecycle"]}],"primaryImageOfPage":{"@id":"https://vuejs.school/#logo"}},{"@id":"https://vuejs.school/#identity","@type":"Organization","description":"A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you.","name":"vuejs.school","url":"https://vuejs.school","logo":{"@id":"https://vuejs.school/#logo"}},{"@id":"https://vuejs.school/#logo","@type":"ImageObject","caption":"vuejs.school","contentUrl":"https://vuejs.school/apple-touch-icon.png","inLanguage":"en","url":"https://vuejs.school/apple-touch-icon.png"}]} ```