当使用动态组件时，当您切换 :is 指令的值时，Vue 会重新创建组件的新实例。尽管它在大多数情况下很有用，但有时我们想要保存隐藏元素的状态。
这时 Vue 的 keep-alive 组件就派上用场了，它可以是提高速度并提供更好的用户体验的好方法。
什么是 keep-alive？
为了理解 <keep-alive>，您首先必须了解什么是动态组件。简而言之，它可以使用 v-bind:is 指令在不同组件之间切换。
最常见的示例是Tab 切换，其中根据打开的选项卡，内容切换到不同的组件。
通常，当您在动态组件之间切换时，Vue 会为您的组件创建一个全新的实例。
然而，Vue <keep-alive> 是一个围绕动态组件的包装器元素。当组件处于非活动状态时，它会存储对组件的缓存引用。
这意味着 Vue 不必每次切换组件时都创建一个新实例。相反，当您返回时，它只使用缓存的引用。
<keep-alive> 是 Vue 的抽象元素，这意味着它既不渲染 DOM 元素，也不显示为组件。
keep-alive 使用场景
在大多数情况下，动态组件的内置功能是完美的。在某些情况下，您可能想要缓存状态，例如：
- 缓存表单上的用户输入，读取进度等。
- 你的组件会调用很多 API，而你只想调用一次
- 您的组件需要花一些时间来设置数据和计算属性，您希望在它们之间快速切换
基本使用
你可以在 Vue keep-alive 进行简单的测试，已经给出基本模板。
假设我们有一个父选项卡组件，它有两个子组件 About 和Contact。
<!-- About.vue -->
<template>
<div>
Hello Vue!
</div>
</template>
<script>
export default {
mounted() {
console.log('已挂载 About')
}
}
</script>
<!-- Contact.vue -->
<template>
<div>
<input type="text" placeholder="请输入内容..." />
<input type="button" value="Send" />
</div>
</template>
<script>
export default {
mounted() {
console.log('已挂载 Contact')
}
}
</script>
父组件具有两个按钮，用于切换动态组件。
<template>
<div>
<button v-for='tab in tabs' :key='tab' @click='component = tab'>
{{ tab }}
</button>
<component :is='component' />
</div>
</template>
<script>
import About from "@/components/About.vue"
import Contact from "@/components/Contact.vue"
export default {
components: { About, Contact },
data () {
return {
tabs: ["About", "Contact"],
component: "About"
}
}
}
</script>
现在，如果您运行您的应用程序，您应该会看到类似这样的内容。
在组件之间切换时，您应注意：
- 每次切换选项卡时，来自
mount()的消息都会打印在控制台中
- 如果在
Contact中填写输入，然后切换选项卡，在Contact选项卡输入的信息将不存在。
这两个都是因为没有使用 keep-alive，Vue 会创建组件的新实例，因此所有生命周期挂钩都会重新运行，并且您所做的任何输入都会丢失。
转到 Tabs.vue 组件，将动态组件包装在 <keep-alive> 组件中
<keep-alive>
<component :is='component' />
</keep-alive>
现在上面出现的问题都不存在：
来自
mount()的消息应该由每个组件打印一次，并且只能打印一次如果您在
Contact选项卡上输入信息，则在切换选项卡返回时，该输入仍应存在
虽然这是使用 keep-alive 组件的简单用例，但它是说明为什么要使用它们的一个很好的例子。
include、exclude 和 max
include 和 exclude 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示，是 2.1.0 新增的属性
-
include：只有匹配的组件会被缓存。 -
exclude：任何匹配的组件都不会被缓存。
<!-- 逗号分隔字符串 -->
<keep-alive include="Contact">
<component :is="component"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/About|Contact/">
<component :is="component"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['About', 'Contact']">
<component :is="component"></component>
</keep-alive>
<!-- 与 include 用法一致，但目的是任何匹配的组件都不会被缓存。-->
<keep-alive exclude="Contact">
<component :is="component"></component>
</keep-alive>
匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称（父组件 components 选项的键值）。匿名组件不能被匹配。
max 表示最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。是 2.5.0 新增的属性。
<keep-alive :max="2">
<component :is="view"></component>
</keep-alive>
keep-alive 生命周期钩子
为了帮助观察何时切换 <keep-alive> 的组件，我们有两个独特的钩子：
activated()在被keep-alive缓存的组件激活时调用。deactivated()在被keep-alive缓存的组件停用时调用。
注意：这两个钩子在服务器端渲染期间不被调用。
使用前面的示例实现这些挂钩，在切换组件时将其输出到控制台。
// About.vue
mounted() {
console.log('About 已挂载')
},
activated () {
console.log('About 已激活')
},
deactivated () {
console.log('About 已停用')
}
现在，如果我们运行我们的应用程序并在选项卡之间切换，我们将看到挂载的消息仅打印一次，而激活/停用的消息则重复打印。
注意：当动态组件首次显示时，它既已挂载又被激活。因此，确保您不会两次计算某些逻辑很重要。
结合 router，缓存部分页面
在 router 中设置路由的元信息 meta
export default new Router({
routes: [
{
path: '/about',
name: 'About',
component: About,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: '/contact',
name: 'Contact',
component: Contact,
meta: {
keepAlive: true // 需要被缓存
}
}
]
})
使用 $route.meta 的 keepAlive 属性进行
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
keep-alive 的利弊
当然，使用 <keep-alive> 而不只是默认的动态组件是有利有弊。
- 优点：存储组件缓存，更快的组件
- 缺点：容易过度使用，正常情况下往往足够好。
对于大多数情况，仅使用默认的动态组件而无需 <keep-alive> 是最佳解决方案。但是，如果您想轻松保存用户状态，则 <keep-alive> 组件是一种非常简单的方法。
