preface

As the current projects are based on TAB navigation, the purpose is to remember the search term or form value of the previous page when the page jumps, reduce requests and increase efficiency. The first response is keep-alive, and then my nightmare comes 😫. Ps: see the cover picture come in remember to collect oh 🍭

Keep alive – concept

Properties:
  • includeonlyThe name of theMatching components are cached πŸ™„(the name refers to the name defined in the component).
  • exclude. Any component whose name matches will not be cached 🧡.
  • max. Maximum number of component instances can be cached πŸ₯™.
Usage:


when wrapping dynamic components, inactive component instances are cached rather than destroyed. Like
,

is an abstract component 🍀 : it does not render a DOM element on its own, nor does it appear in the component’s parent chain πŸ₯§.

When a component is switched within

, its activated and deactivated lifecycle hook functions will be executed πŸšƒ, since we may need to cache the entire routing page, so

will be cached πŸ›΄.

Order of execution:
  • The sequence in which the hooks are triggered when the page is first enteredcreated-> mounted-> activatedTriggered when exitingdeactivated. Only fires when reentering (forward or backward)activated🦼.

The router – view concept

  • <router-view>A component is a functional component that renders the matching component 🎨 for a given path. Rendered components<router-view>It can also contain its own<router-view>, which will render the component for the nested path 🀴.

Router-view key attribute (each component has a key attribute. Vue will reuse the same component and use a different key if it needs to re-render) πŸ›’

  1. Don’t setrouter-view ηš„ keyattribute

Since Vue will reuse the same component, namely /page/1 => /page/2 or /page? id=1 => /page? Created/Mounted (πŸ†); 🍱 Add beforeRouteUpdate (πŸ₯―) to the route component.

  1. Set up therouter-view ηš„ keyAttribute values for$route.path

/page/1 => /page/2; /page/1 => /page/2; 🍡 => /page/2; id=1 => /page? Id =2,🍦 Because the $route.path of the two routes is the same, the component πŸ₯‘ is reused just as if the key attribute is not set.

  1. Set up therouter-view ηš„ keyAttribute values for$route.fullPath

/page/1 => /page/2; /page/1 => /page/2;

From/page? id=1 => /page? If id=2, the component is forced not to reuse πŸ₯ͺ because the two routes have different $route.fullPath.

writing

Vue2.0 spelled

For example, an item references multiple components that modify the currentTabComponent value by corresponding events to achieve a dynamic component cache. <keep-alive> < Component V-bind :is="currentTabComponent"></component> </keep-alive> # Package route # a,b for component name <keep-alive :include=[a,b]> <router-view :key="$route.fullPath"></router-view> </keep-alive>Copy the code

Vue3.0 spelled

For example, an item references multiple components that modify the currentTabComponent value by corresponding events to achieve a dynamic component cache <keep-alive> < Component V-bind :is="currentTabComponent"></component> </keep-alive> # Key to bind to component <router-view v-slot="{ Component }"> <keep-alive :include=[a,b]> <component :is="Component" :key="$route.fullPath"/> </keep-alive> </router-view>Copy the code

The project of actual combat

Unillustrated egg πŸ€’, a brief look at the result we finally achieved

Do not usekeep-aliveThe effect of

  • All pages are not cached, and any jumps involving routing are executed by the current componentmounted, 🎏 there is some performance cost, causing the loaded data to be reloaded for rendering and the previously filled data to be not cached during the overhead navigation switch 🧧.

All of themkeep-aliveThe effect of

  • The first time of each page is executedmounted, 🧀 a subsequent visit to the page will enter the cache, causing us to close the page without performing component destruction, loading only the first loaded data, the new data is not rendering 🦺.

Using thekeep-alivethroughincludeandvuexControl the cache

In this way we can dynamically control cached components.

  • When the page is closed we remove components that do not need caching 🍱. After removal the component’s destruction life cycle πŸ₯‚ is performed. The page is re-rendered before opening and sometimes this is perfect 🍟.
  • But things always go the other way, like the editor 😴 in the image above, who are different routes but point to the same componentnameIt must be the same) 🀒, which would cause us to open two edit pages at the same time, loading the data for the first time each time 😣.

Final solution: keep-aliveinclude+ router – viewkey

We already mentioned the role of key in router-view 🍊, So we just need to bind the router-view key to “$route.fullPage”πŸ₯‚ if it’s vue3.x we need to bind the key to component πŸ₯‚ so that when we click on the edit of a different item in the list each time we walk through the latest data 🍯, At the same time, when we switch the two edit pages above the include in keep-alive, we will go through the cache 🍻 instead of loading the page 🍡.

vue3.xSet up thename

< Script Setup > is a compile-time syntactic sugar for using composite apis in single-file components (SFC).

  • We do not need to use data when defining variables
  • Methods can define variables and methods directly within tags without using methods.

Include in kepp-alive requires the component name. How do you define the name variable in vue3.

In Vue3. X, the name of the component is inferred from the file name, which means that the name of the component corresponds to the name😘. If you are stubborn 🀣, there is a way to define the component name: 🌯.

  1. Write twoscriptThe label
  2. If the project is built through Vite, it can be built through plug-ins (vite-plugin-vue-setup-extend).

1. Multiple Script tags

<script>
    export default {
        name: 'demo'
    }
</script>

<script setup>
    // do something...
</script>
Copy the code
  1. viteBuilding plug-in references
Ts import {defineConfig} from 'vite' import VueSetupExtend # install NPM I vite-plugin-vue-setup-extend -d # configure vite.config  from 'vite-plugin-vue-setup-extend' export default defineConfig({ plugins: <script lang="ts" setup name="demo"> </script>Copy the code

conclusion

At the beginning, it was because I didn’t have a thorough grasp of keep-alive, but I only knew what it was, πŸ„, which was used in real projects that I found many problems. Goodbye, brothers. Next time, I will see πŸ₯€.

Refer to the article

How are components defined by Vue3.2 Script Setup named?

Vue2 website

Vue3 website