Vue：使用 KeepAlive 缓存切换掉的 component

一、内置特殊元素

不是组件
<component>、<slot> 和 <template> 具有类似组件的特性，也是模板语法的一部分。但它们并非真正的组件，同时在模板编译期间会被编译掉。因此，它们通常在模板中用小写字母书写。

1.1 <component>

一个用于渲染动态组件或元素的“元组件”。

1.1.1 Props

interface DynamicComponentProps {
  is: string | Component
}

1.1.2 详细信息

要渲染的实际组件由 is prop 决定。

当 is 是字符串，它既可以是 HTML 标签名也可以是组件的注册名。
或者，is 也可以直接绑定到组件的定义。

示例

按注册名渲染组件 (选项式 API)：

<script>
import Foo from './Foo.vue'
import Bar from './Bar.vue'

export default {
  components: { Foo, Bar },
  data() {
    return {
      view: 'Foo'
    }
  }
}
</script>

<template>
  <component :is="view" />
</template>

按定义渲染组件 (<script setup> 组合式 API)：

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Math.random() > 0.5 ? Foo : Bar" />
</template>

渲染 HTML 元素：

<component :is="href ? 'a' : 'span'"></component>

内置组件都可以传递给 is，但是如果想通过名称传递则必须先对其进行注册。举例来说：

<script>
import { Transition, TransitionGroup } from 'vue'

export default {
  components: {
    Transition,
    TransitionGroup
  }
}
</script>

<template>
  <component :is="isGroup ? 'TransitionGroup' : 'Transition'">
    ...
  </component>
</template>

如果将组件本身传递给 is 而不是其名称，则不需要注册，例如在 <script setup> 中。

如果在 <component> 标签上使用 v-model，模板编译器会将其扩展为 modelValue prop 和 update:modelValue 事件监听器，就像对任何其他组件一样。但是，这与原生 HTML 元素不兼容，例如 <input> 或 <select>。因此，在动态创建的原生元素上使用 v-model 将不起作用：

<script setup>
import { ref } from 'vue'

const tag = ref('input')
const username = ref('')
</script>

<template>
  <!-- 由于 'input' 是原生 HTML 元素，因此这个 v-model 不起作用 -->
  <component :is="tag" v-model="username" />
</template>

在实践中，这种极端情况并不常见，因为原生表单字段通常包裹在实际应用的组件中。如果确实需要直接使用原生元素，那么你可以手动将 v-model 拆分为 attribute 和事件。

二、动态组件

有些场景会需要在两个组件间来回切换，比如 Tab 界面：
通过 Vue 的元素和特殊的 is attribute 实现的：

<!-- currentTab 改变时组件也改变 -->
<component :is="tabs[currentTab]"></component>

被传给 :is 的值可以是以下几种：

被注册的组件名
导入的组件对象

可以使用 is attribute 来创建一般的 HTML 元素。

当使用 <component :is=“…”> 来在多个组件间作切换时，被切换掉的组件会被卸载。我们可以通过 <KeepAlive> 组件强制被切换掉的组件仍然保持“存活”的状态。

三、KeepAlive

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

3.1 基本使用

在组件基础章节中，我们已经介绍了通过特殊的 <component> 元素来实现动态组件的用法：

<component :is="activeComponent" />

默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。

在下面的例子中，你会看到两个有状态的组件——A 有一个计数器，而 B 有一个通过 v-model 同步 input 框输入内容的文字展示。尝试先更改一下任意一个组件的状态，然后切走，再切回来：

你会发现在切回来之后，之前已更改的状态都被重置了。

在切换时创建新的组件实例通常是有意义的，但在这个例子中，我们的确想要组件能在被“切走”的时候保留它们的状态。要解决这个问题，我们可以用 <KeepAlive> 内置组件将这些动态组件包装起来：

<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

3.2 包含/排除

<KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组：

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。

注意
在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。

3.3 最大缓存实例数

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

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

3.4 缓存实例的生命周期

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

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

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
})
</script>

请注意：

onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。
这两个钩子不仅适用于 <KeepAlive> 缓存的根组件，也适用于缓存树中的后代组件。

<KeepAlive> API 参考

四、使用KeepAlive实例代码

效果图

1. testKeepAlive.vue

<template>
    <div class="content-root">
        <div class="content-wrap">


            <!-- <div class="tool-bar"></div> -->
            <!-- <div class="radio-wrap">
            <input type="radio" id="1" value="1" v-model="selectValue" @change="onSelected({ name: 'A', id: 1 })">
            <label class="label-txt" for="1">A</label>
            <br>
            <input type="radio" id="2" value="2" v-model="selectValue" @change="onSelected({ name: 'B', id: 2 })">
            <label class="label-txt" for="2">B</label>
            <br>
        </div> -->

            <div class="radio-wrap">
                <div class="radio-item" v-for="(item, index) in selectData" :key="index">
                    <input type="radio" :id="item.id" :value="item.id" :checked="item.selected"
                        @change="onSelected(item)">
                    <label class="label-txt" :for="item.id">{{ item.name }}</label>
                </div>
            </div>
            <div class="txt">Current component: {{ componentName }} </div>
            <!-- <component :is="view" :count=countValue :msg=msgValue /> -->
            <!-- <component :is="view" /> -->
            <!-- 
                使用 缓存 KeepAlive
                <KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。
               -->
            <KeepAlive>
                <component :is="view" />
            </KeepAlive>

        </div>
    </div>

</template>
<script>
import countComponent from './testComponet/countComponent.vue';
import inputComponent from './testComponet/inputComponent.vue';
export default {
    components: { countComponent, inputComponent },
    name: "testKeepAlive",
    data() {
        return {
            componentName: "A",
            view: 'countComponent',
            selectValue: "",
            msgValue: "KeepAlive",
            countValue: 6,

            selectData: [
                {
                    id: 1,
                    name: "A",
                    selected: true,
                },
                {
                    id: 2,
                    name: "B",
                    selected: false,
                }
            ],
        }
    },
    methods: {
        onSelected(item) {
            this.componentName = item.name
            for (let i = 0; i < this.selectData.length; i++) {
                if (item.id == this.selectData[i].id) {
                    this.selectData[i].selected = true
                    console.log("选中 " + this.selectData[i].name + " 组件")
                } else if (this.selectData[i].selected) {
                    this.selectData[i].selected = false
                }
            }

            if (item.id == 1) {
                this.view = 'countComponent'
            } else {
                this.view = 'inputComponent'
            }
        }
    }
}
</script>

<style scoped>
.content-root {
    background-color: white;
    padding-bottom: 0.44rem;
}

.content-wrap {
    margin: 0 0.16rem;
}

.tool-bar {
    height: 0.88rem;
    background-color: rgb(22, 142, 255);
}

.txt {
    color: #000;
    font-size: 0.16rem;
    margin-bottom: 0.2rem;
    margin-top: 0.2rem;
    text-align: left;
}

.radio-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 0.40rem;
}

.label-txt {
    color: #000;
    font-size: 16px;
    margin-left: 0.02rem;
}

.radio-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 0.2rem;
}
</style>

2. countComponent.vue

<template>
    <div class="content-root">
        <div>Count: {{ count }}</div>
        <div class="add" @click="add">+</div>
        <div class="add" @click="minus">-</div>
    </div>

</template>
<script>

export default {
    // props: {
    //     count: {
    //         type: Number,
    //         default: 0,
    //         // 所有 prop 默认都是可选的，除非声明了 required: true
    //         require: false,
    //     }
    // },
    data() {
        return {
            count: 0,
        }
    },

    methods: {
        add() {
            this.count++
        },

        minus() {
            if (this.count > 0) {
                this.count--
            }
        }
    }

}
</script>

<style scoped>
.content-root {
    display: flex;
    align-items: center;
    flex-direction: row;
    background-color: white;
    color: black;
    font-size: 0.16rem;
}

.add {
    width: 0.44rem;
    height: 0.44rem;
    line-height: 0.44rem;
    align-items: center;
    text-align: center;
    border: 0.01rem solid #eeeeee;
    border-radius: 0.08rem;
    background-color: #f5f5f5;
    margin-left: 0.2rem;
}

.minus {
    width: 0.44rem;
    height: 0.44rem;
    line-height: 0.44rem;
    align-items: center;
    text-align: center;
    border: 1px solid #eeeeee;
    background-color: #f5f5f5;
    margin-left: 0.2rem;
}
</style>

3. inputComponent.vue

<template>
    <div class="content-root">
        <div class="msg-txt ">Message is: {{ msg }}</div>
        <input class="input-msg " type="text" name="send" id="send" v-model="msg" placeholder="请输入内容" />
    </div>
</template>
<script>
export default {
    // props: {
    //     msg: String
    // },
    data() {
        return {
            msg: "",
            placeholderTxt: ""
        }

    },
    methods: {

    }

}
</script>
<style scoped>
.content-root {
    display: flex;
    align-items: center;
    flex-direction: row;
    background-color: white;
    color: black;
    font-size: 0.16rem;
}

.input-msg {
    width: 1rem;
    padding: 0 0.08rem;
    height: 0.44rem;
    border: 0.01rem solid #eeeeee;
    border-radius: 0.08rem;
    margin-left: 0.1rem;
}

.msg-txt {
    font-size: 0.16rem;
    color: black;
}
</style>