Each lifecycle event fires as a DOM event on the .page element (page:init) and as a router event (pageInit) that bubbles to the app. A router component subscribes with $on and the camelCase name; the handler gets the event and a page object with el, name, route, direction, and from and to positions. src/js/page-log.js (on with ?log=pages) logs eight of them plus the $onMounted and $onUnmounted hooks; Playwright 1.62 26,280 stamps each message with the milliseconds since the last tap. Salt and Saffron, then Back:
--- tap Salt and Saffron
698 ms api GET /books/3 -> 200 in 611 ms
703 ms book props: id, source, book
704 ms book $onMounted
704 ms book pageMounted next -> current
712 ms book pageInit next -> current
713 ms book 3 bound its handlers on /books/3/
718 ms home pageBeforeOut current -> previous
718 ms book pageBeforeIn next -> current
1157 ms home pageAfterOut current -> previous
1163 ms book pageAfterIn next -> current
--- tap Back
80 ms home pageReinit previous -> current
80 ms book pageBeforeOut current -> next
81 ms home pageBeforeIn previous -> current
489 ms book pageAfterOut current -> next
490 ms home pageAfterIn previous -> current
491 ms book pageBeforeRemove next -> undefined
491 ms book $onUnmounted
The new page is mounted and initialized off screen at next; the before events start the slide and the after events end it about 440 ms later. Going back, the catalog gets pageReinit, not pageInit, and the book page hears pageBeforeRemove last. keepAlive routes get pageBeforeUnmount instead, and pageTabShow/pageTabHide fire for views inside tabs.