Vue动态组件以及keep-alive的使用

一、动态组件

1.1. 概念和使用

• Vue内部提供的组件component组件作用是：实现动态的渲染组件，按需显示组件。

• component 标签是 vue 内置的，作用：组件的占位符
• is 属性的值，表示要渲染的组件的名字
• is 属性的值，应该是组件在 components 节点下的注册名称
• 动态组件被切换的时候会被销毁，切换回去的时候会重新创建用

我们这里有两个组件Left和Right，需求：在app根组件中点击按钮可以按需显示组件。

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
    <button @click="comName = 'Left' ">展示Left组件</button>
    <button @click="comName = 'Right' ">展示Right组件</button>
​
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>
​
<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
export default {
    data(){
    return{
      comName:'Left'
    }
  },
    components:{
    Right,
    Left
  },
}
    
</script>

二、keep-alive

2.1. 概念和基本使用

• 当使用 <component :is="..."> 来在多个组件间作切换时，被切换掉的组件会被卸载。
• <KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。
• <keep-alive> 同样也是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
• 我们可以通过 <KeepAlive> 组件强制被切换掉的组件仍然保持“存活”的状态。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

：这个<keep-alive>要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

2.2. 包含include和排除exclude属性

<KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude 来定制该行为。

include 和 exclude 属性允许组件有条件的选择性地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

• include - 只有名称匹配的组件会被缓存。
• exclude - 任何名称匹配的组件都不会被缓存。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
 
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
 
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

以上代码中a和b均为两个组件的组件名。

2.3. 最大缓存实例数

我们可以通过传入 max 属性来限制可被缓存的最大组件实例数。<KeepAlive> 的行为在指定了 max 后类似一个LRU缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

2.4. 缓存实例的生命周期

当一个组件实例从 DOM 上移除，但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。

当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。

一个持续存在的组件可以通过activated() 和deactivated()注册相应的两个状态的生命周期钩子

• 当组件第一次被创建的时候，既会执行 created 生命周期，也会执行 activated 生命周期
• 当组件再次被激活的时候，只会触发 activated 生命周期，不再触发 created。因为组件没有被重新创建

<script>
export default {
  name: 'MyLeft',
  data() {
    return {
      count: 0
    }
  },
  activated() {
	  // 调用时机为首次挂载
	  // 以及每次从缓存中被重新插入时
  },
  deactivated() {
	  // 调用时机在从 DOM 上移除、进入缓存
	  // 以及组件卸载时调用

  }
}
</script>