Switching and caching of Vue components

The SPA page is composed of multiple components, and there is the problem of switching between components. The concept of dynamic component is also proposed in Vue, which enables us to better realize the switching effect between components. However, the switching of components in Vue is actually a process of re-creation and destruction of components. In some scenarios, we do not want components to be re-created and re-rendered

Here I’ll focus on switching components in Vue and caching solutions

I. Switching mode of components

(1) Use v-if and V-else or (v-show)

<Com1 v-if="istrue" />
<Com2 v-else />
Copy the code

Com1 displays when istrue inside istrue, otherwise Com2 displays

(2) Use IS feature to switch dynamic components

// Click toggle login, register, and exit components

   <template>
     <div>
        <a href="#" @click.prevent="comName = 'login'">The login</a>
        <a href="#" @click.prevent="comName = 'register'">registered</a>
        <a href="#" @click.prevent="comName = 'logOut'">exit</a>
        
        //  <component></component>To display the component with the corresponding name, which is equivalent to a placeholder // :is property specifying the component name<component :is="comName"></component>
      </div>
    </template>
Copy the code

(3) Use router to switch dynamic components

// Routing rules:
  {
    path: '/login'.name: 'login'.component: () = > import('.. /views/login.vue')}, {path: '/register'.name: 'register'.component: () = > import('.. /views/register.vue')},// Where the component needs to be displayed:
  <router-view />
Copy the code

Component caching

Component caching allows you to cache data inside a component during a dynamic component switch, rather than going through a destruction process

Usage scenario: Switch between multiple forms and save the data in the form

1. Keep alive – definition:

When dynamic components are wrapped, inactive component instances are cached rather than destroyed.

Is an abstract component: it does not render a DOM element on its own, nor does it appear in the parent component chain. When a component is switched within

, its activated and deactivated lifecycle hook functions are executed accordingly.

2. The two keep-alive hook functions

If keep-alive is used, data is stored in memory. To obtain the latest data each time a page is entered, data needs to be obtained in the Activated phase, which is responsible for obtaining data in the original Created hook function.

Note: These two lifecycle functions are called only when the component is wrapped by keep-alive, and not if used as a normal component

After version 2.1.0, exclude does not allow the hook functions to be called even if wrapped in keep-alive. This hook function is also not called during server-side rendering.

Component hook calls with caching set:

BeforeRouterEnter ->created->… – > activated – >… ->deactivated> beforeRouteLeave

Follow-up Access: beforeRouterEnter -> Activated -> DeActivated > beforeRouteLeave

3. Use method of keep-alive

(1)Props

Array include string - | | | | regular name matching components will be cached - > include the value of the name for a component. Exclude - string | | regular any name matching component will not be cached. Max - Quantity determines the maximum number of components that can be cached.Copy the code

(2) the match <component></component>use

  <template>
     <div>
        <a href="#" @click.prevent="comName = 'login'">The login</a>
        <a href="#" @click.prevent="comName = 'register'">registered</a>
        <a href="#" @click.prevent="comName = 'logOut'">exit</a>// Login components will be cached without setting include to cache all mounted to by default<component></component>Include = ['login','register']<keep-alive include="login">
          <component :is="comName"></component>
      </keep-alive>    
      </div>
    </template>
Copy the code

(3) Used with routes

The keepAlive attribute of the route meta information needs to be configured. The keepAlive code can be wrapped with V-if. If the keepAlive value in the meta is true, the keepAlive code is cached

 {
    path: '/login'.name: 'login'.component: () = > import('.. /page/login.vue')
    meta: {keepAlive : true   // The login component is cached}}, {path: '/index'.name: 'index'.component: () = > import('.. /page/index.vue'),
      meta: {keepAlive : false   // The index component is not cached}}Copy the code

<div id="app">
    <keep-alive> 
    <! -- View components that need caching -->
        <router-view v-if="$route.meta.keepAlive"> </router-view>
    </keep-alive><! -- View component without cache --><router-view v-if=! "" $route.meta.keepAlive"> </router-view>
</div>
Copy the code

(4) Clear cache components

 / / beforeRouteLeave () hook
 
// Determine whether to go to the details page

  beforeRouteLeave(to, from, next) {
      if (to.path === "/goods_detail") {
        from.meta.keepAlive = true;
      } else {
        from.meta.keepAlive = false;
      }
      next();
    }
Copy the code

Development:

BeforeRouteLeave hooks

BeforeRouteLeave (to, from, next) : function executed before leaving the route. It can be used for reverse page transfer and page jump.

 // Click and get the data back to the place of order address
  beforeRouteLeave (to, from, next) {
    if (to.name === 'home') {
      to.query.temp = 'Selected address'
    }
    console.log(to)
    console.log(from)
    next()// Don't forget to write
  },
Copy the code