vue组件切换,动态组件,组件缓存

博客背景:

在组件化开发模式下，我们会把整个项目拆分成很多组件，然后按照合理的方式组织起来,达到预期效果
因为页面是多组件组织起来的,这时候自然就存在组件之间的切换问题，Vue中也提出了动态组件的概念,使得我们可以更好的实现组件之间的切换效果 , 但是vue中组件的切换实际是组件本身重新创建和销毁的过程,在某些场景下我们并不希望组件被重新创建重新渲染
实际场景: 用户操作 列表页-->详情页-->列表页 此时需要达到的预期效果是用户从详情页切换回列表页的时候原来的页面保持不变,而不是重新渲染,此时就需要在用户从列表页切换到详情页的时候对原来的列表页进行缓存
本文主要介绍Vue中组件的切换以及缓存解决方法

1.组件的切换方式

方式一: 使用 `v-if和v-else`

// 变量flag为true时显示comp-a组件 ,相反则显示comp-b组件
<comp-a v-if="flag"></comp-a>

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

方式二:使用内置组件:`<component></component>`

// 点击切换登录,注册,退出组件
   <template>
     <div>
        <a href="#" @click.prevent="comName = 'login'">登录</a>
        <a href="#" @click.prevent="comName = 'register'">注册</a>
        <a href="#" @click.prevent="comName = 'logOut'">退出</a>
        
        //  <component></component> 来展示对应名称的组件,相当于一个占位符
        //    :is 属性指定 组件名称

      <component :is="comName"></component>
      </div>
    </template>

方式三 : `vue-router`

// 路由规则:
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login.vue')
  },
  {
    path: '/register',
    name: 'register',
    component: () => import('../views/register.vue')
  },
  
  // 需要展示组件的位置:
   <router-view />

2.组件缓存: `keep-alive`

根据需求对组件缓存,而不是销毁重建,正如本文开篇举例的实际场景

1.`keep-alive`定义:

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

2.`keep-alive`的生命周期

1. activated

在 keep-alive 组件激活时调用该钩子函数在服务器端渲染期间不被调用

2. deactivated

在 keep-alive 组件停用时调用该钩子在服务器端渲染期间不被调用

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated
使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

注意：只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。

设置了缓存的组件：

第一次进入：beforeRouterEnter ->created->…->activated->…->deactivated> beforeRouteLeave

后续进入时：beforeRouterEnter ->activated->deactivated> beforeRouteLeave

3.`keep-alive`使用方法

1.Props

include - 字符串或数组,正则表达式。只有名称匹配的组件会被缓存-->include的值为组件的name。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件。

2.搭配`<component></component>`使用

  <template>
     <div>
        <a href="#" @click.prevent="comName = 'login'">登录</a>
        <a href="#" @click.prevent="comName = 'register'">注册</a>
        <a href="#" @click.prevent="comName = 'logOut'">退出</a>
     
     // login组件会被缓存 不设置include会默认缓存所有挂载到<component></component>的组件
     // 缓存多个指定组件include = ['login','register']
      <keep-alive include="login">
          <component :is="comName"></component>
      </keep-alive>    
      </div>
    </template>

3.搭配`<router-view />`路由使用

需配置路由meta信息的keepAlive属性
keep-alive代码可以结合v-if进行包裹，如果meta中的keepAlive为true进行缓存，否侧不进行缓存，这样可以更灵活一些

 {
    path: '/login',
    name: 'login',
    component: () => import('../views/login.vue')
    meta:{
        keepAlive : true   // login组件会被缓存
    }
  },
  {
    path: '/register',
    name: 'register',
    component: () => import('../views/register.vue'),
      meta:{
        keepAlive : false   //  register组件不会被缓存
    }
  },

<router-view />:

<div id="app">
    <keep-alive> 
    <!-- 需要缓存的视图组件 -->
        <router-view v-if="$route.meta.keepAlive"> </router-view>
    </keep-alive>
    
    <!-- 不需要缓存的视图组件 --> 
    <router-view v-if="!$route.meta.keepAlive"> </router-view>
</div>

4.清除缓存组件

 // beforeRouteLeave()钩子
// 判断是否要到详情页
  beforeRouteLeave(to, from, next) {
      if (to.path === "/goods_detail") {
        from.meta.keepAlive = true;
      } else {
        from.meta.keepAlive = false;
      }
      next();
    }

vue组件切换,动态组件,组件缓存

1.组件的切换方式

方式一: 使用 v-if和v-else

方式二:使用内置组件:<component></component>

方式三 : vue-router

2.组件缓存: keep-alive

1.keep-alive定义:

2.keep-alive的生命周期

3.keep-alive使用方法