SoFunction
Updated on 2025-03-03

About vue component switching, dynamic components, component caching

background:

  • In the component development model, we will split the entire project into many components and organize it in a reasonable way to achieve the expected results
  • Because the page is organized by multiple components, there is naturally a problem of switching between components. Vue also proposes the concept of dynamic components, so that we can better realize the switching effect between components. However, the switching of components in vue is actually a process of recreation and destruction of components themselves. In some scenarios, we do not want components to be recreated and re-rendered.

Actual scenario:User Operation List Page -->Details Page -->List Page The expected effect that needs to be achieved at this time is that when the user switches from the details page to the list page, the original page remains unchanged, rather than re-rendering. At this time, it is necessary to cache the original list page when the user switches from the list page to the details page.

This article mainly introduces the switching of components in Vue and the solution to caching.

1. Component switching method

Method 1: Use v-if and v-else

// When the variable flag is true, the comp-a component is displayed, and the comp-b component is displayed.<comp-a v-if="flag"></comp-a>

<comp-b v-else></comp-b>

Method 2: Use built-in components: <component></component>

// Click to switch to log in, register, and exit the component   &lt;template&gt;
     &lt;div&gt;
        &lt;a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @="comName = 'login'">Login</a>        &lt;a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @="comName = 'register'">Register</a>        &lt;a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @="comName = 'logOut'">Exit</a>        
        // <component></component> to display the corresponding name component, equivalent to a placeholder        // :is property specifies the component name
      &lt;component :is="comName"&gt;&lt;/component&gt;
      &lt;/div&gt;
    &lt;/template&gt;

Method 3: vue-router

//Routing rules:  {
    path: '/login',
    name: 'login',
    component: () =&gt; import('../views/')
  },
  {
    path: '/register',
    name: 'register',
    component: () =&gt; import('../views/')
  },
  
  // The location where the components need to be displayed:   &lt;router-view /&gt;

2. Component cache: keep-alive

Cache components according to requirements, rather than destroying and rebuilding, just like the actual scenario shown in the beginning of this article

-alive definition

<keep-alive>When wrapping dynamic components, inactive component instances are cached instead of destroying them.

<keep-alive> is an abstract component:It does not render a DOM element itself, nor does it appear in the parent component chain. When the component is<keep-alive> It's switched insideactivated anddeactivated These two life cycle hook functions will be executed accordingly.

-alive's life cycle

activated

existkeep-aliveCalled when component is activated. This hook function is not called during server-side rendering.

 deactivated

existkeep-alive Called when component is deactivated This hook is not called during server-side rendering

Being included in keep-alive Components created in the file will have two additional life cycle hooks:activated anddeactivated
use keep-alive The data will be kept in memory. If you want to get the latest data every time you enter the page, you need to get the data in the activated stage and bear the originalcreated The task of getting data in the hook function.

Notice:Only when the component is wrapped by keep-alive, these two life cycle functions will be called. If used as normal components, they will not be called. After version 2.1.0, after using exclude, even if they are wrapped in keep-alive, these two hook functions will not be called! In addition, this hook function will not be called when rendering on the server side.

The cached components are set:

  • First time entry:beforeRouterEnter ->created->…->activated->…->deactivated> beforeRouteLeave
  • When entering the following:beforeRouterEnter ->activated->deactivated> beforeRouteLeave

3. Keep-alive usage method

include - String or array, regular expression. Only components with matching names will be cached -->includeThe value of the component isname。
exclude - String or regular expression. Any component with a name matching will not be cached.
max - number. How many components can be cached at most.

2. Use with <component></component>

  &lt;template&gt;
     &lt;div&gt;
        &lt;a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @="comName = 'login'">Login</a>        &lt;a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @="comName = 'register'">Register</a>        &lt;a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @="comName = 'logOut'">Exit</a>     
     // The login component will be cached. If you do not set include, all components mounted to <component></component> will be cached by default.     // Cache multiple specified components include = ['login','register']      &lt;keep-alive include="login"&gt;
          &lt;component :is="comName"&gt;&lt;/component&gt;
      &lt;/keep-alive&gt;    
      &lt;/div&gt;
    &lt;/template&gt;

3. Use with <router-view /> route

Requires routing configurationmetaInformationkeepAliveproperty
keep-aliveThe code can be wrapped in combination with v-if, if the metakeepAlivefortrueCache, no cache, so that it can be more flexible

 {
    path: '/login',
    name: 'login',
    component: () =&gt; import('../views/')
    meta:{
        keepAlive : true   // The login component will be cached    }
  },
  {
    path: '/register',
    name: 'register',
    component: () =&gt; import('../views/'),
      meta:{
        keepAlive : false   // register component will not be cached    }
  },

<router-view />:

&lt;div &gt;
    &lt;keep-alive&gt; 
    &lt;!-- View components that require cache --&gt;
        &lt;router-view v-if="$"&gt; &lt;/router-view&gt;
    &lt;/keep-alive&gt;
    
    &lt;!-- 不View components that require cache --&gt; 
    &lt;router-view v-if="!$"&gt; &lt;/router-view&gt;
&lt;/div&gt;

4. Clear cache components

 // beforeRouteLeave() hook// Determine whether you want to go to the details page  beforeRouteLeave(to, from, next) {
      if ( === "/goods_detail") {
         = true;
      } else {
         = false;
        // this.$destroy()
      }
      next();
    }

This is the article about vue component switching, dynamic components, and component caching. For more related vue component switching, dynamic components, and component caching, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!