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.namefor (let i = 0; i < this.selectData.length; i++) {if (item.id == this.selectData[i].id) {this.selectData[i].selected = trueconsole.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>