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.
- Read the scene. A component tree and one event: the page loads, a click updates it, a child is removed.
- 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.
- 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.vueLevel 1 of 7One component mounts
The page loads. In which order do setup, a watchEffect and the two mount hooks run?
setup, watchEffect, onBeforeMount and onMounted4 cardsUp nextPlay - App.vueChild.vueLevel 2 of 7Parent and child mount
App renders a Child. The child finishes mounting before its parent does.
mount order across a tree6 cardsNot startedPlay - App.vueHeader.vueFooter.vueLevel 3 of 7Two children mount
App renders a Header and a Footer. Both are set up before either is mounted.
siblings are set up first, mounted together9 cardsNot startedPlay - App.vueLevel 4 of 7A 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 nextTick5 cardsdecoysNot startedPlay - App.vueChild.vueLevel 5 of 7Parent and child update
App passes count to Child as a prop, and both render it. Setup does not run again.
update order across a tree5 cardsdecoysNot startedPlay - App.vueChild.vueGrandchild.vueLevel 6 of 7v-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 update7 cardsdecoysNot startedPlay - App.vueChild.vueLevel 7 of 7KeepAlive hides the child
Child sits inside <KeepAlive>. Hiding it deactivates it instead of unmounting. Two cards never fire.
onDeactivated instead of unmounting5 cardsdecoysNot startedPlay