In Addition to keep-alive, What Other Page Caching Implementations Are Available in Vue3?

Introduction

There is such a requirement: after the list page enters the details page, switch back to the list page, you need to cache the list page, and if you enter the list page from the home page, you need to reload the list page.

For this requirement, my first thought is to use keep-alive to cache the list page, and when the list and detail page are switched, the list page will be cached; When you enter the list page from the home page, reset the list page data and get the new data again to achieve the effect of reloading the list page.

However, one of the disadvantages of this solution is that if the list page is complex enough, with pull-down refreshes, pull-down loads, pop-ups, carousels, etc., a lot of data and state need to be reset when clearing the cache, and some components may have to be destroyed and reloaded manually, which not only increases the complexity but also makes it easy to bug.

Photo by Ferenc Almasi on Unsplash

Next, I have a new implementation in mind (the code is based on Vue3).

keep-alive cache and clear

keep-alive caching principle: When entering the page, the page component is rendered, and keep-alive will cache the instance of the page…