Framework7 View domCache pushState cached page listener lifecycle

Direct answer

When domCache is enabled on a Framework 7 View or page, pushState navigation does not destroy the page markup on exit. A return visit reuses the existing .page DOM node instead of remounting it from scratch.

Confirmed lifecycle facts

• page:init runs once on first creation and does not refire on a cached return.
• page:beforein, page:afterin, page:show, and page:hide fire on every visit, including returns from the cache.
• page:beforeremove (v6) or page:beforeRemove (v7) fires only when the page is finally evicted from the cache or destroyed.

Listener placement

• Attach one-time setup in page:init.
• Remove listeners in page:beforeremove or page:beforeRemove.
• Do not attach listeners in page:show or page:afterin; they fire on every show and will duplicate on cached pages.

Core versus Vue, React, and Svelte bindings

The bindings wrap Core pages in framework components. domCache still retains the underlying .page node, but component mount/unmount follows the binding's router and keep-alive behavior. Use the binding's mount hook for one-time setup and its unmount hook for cleanup; the underlying page node is reused regardless of binding.

Verification steps

1. Set domCache: true on the View or add data-dom-cache='true' to the page.
2. Navigate to the page, leave, then return.
3. In DevTools Elements, confirm the .page element remains present and is not recreated.
4. Log page:init and page:show; expect page:init once and page:show on each visit.

One missing diagnostic detail that can change the recommendation: the installed Framework 7 major version, because removal event names and timing differ between v6 and v7.