当使用动态组件时，当您切换：is指令的值时，Vue会重新创建组件的新实例。尽管它在大多数情况下很有用，但有时我们想要保存隐藏元素的状态。
使用Vue keep-alive 的组件。
根据您的项目，Vue Keep-Alive组件可以是提高速度并提供更好的用户体验的好方法。
这是VueJS中更高级的主题，因此我假设您在Vue中有一些背景知识。
什么是Keep-Alive
为了了解keep-alive状态，您首先必须了解什么是动态组件。简而言之，可以使用v-bind：is指令在不同组件之间切换。
最常见的示例是Tab系统，其中根据打开的TAB，内容切换到其他组件。
通常，当您在动态组件之间切换时，Vue会创建一个全新的组件实例。
但是，Vue keep-alive是围绕动态组件的包装器元素。当它处于非活动状态时，它将存储对组件的缓存引用。这意味着Vue不必每次切换组件时都创建一个新实例。
取而代之的是，只要您返回它，它就只使用缓存的引用。
VueJS称Keep-Alive为抽象元素-意味着它不呈现DOM元素，也不显示为组件。
“Keep-Alive”有用吗？
在大多数情况下，动态组件的内置功能非常好。在某些情况下，您可能想要缓存状态，例如：
- 将用户输入缓存在表单上，阅读进度等。
- 您的组件进行了大量的API调用，而您只想进行一次
- 您的组件需要一些时间来设置数据和计算的属性，因此您想在它们之间快速切换
像VueJS或任何编程语言中最高级的主题一样，我不能告诉您何时/何时不使用keep-alive组件的确切答案。无论选择什么，只要确保知道为什么要使用某种代码设计即可。
如何使用它
在您的Vue项目中，让我们看一下动态组件系统，以了解keep-alive的组件何时有用。假设我们有一个父Tabs组件，它有两个子组件-About和Contact。
- 关于组件将仅具有静态内容
- 联系人页面将有一个文本输入和一个按钮
另外，我添加了一些控制台消息，以便我们了解发生了什么。
让我们从创建这些组件开始。
About.vue
<template>
<div>
Hello From the About Page!
</div>
</template>
<script>
export default {
mounted() {
console.log('About has been mounted')
}
}
</script>
Contact.vue
<template>
<div>
<input type='text' placeholder='Enter your Message' />
<input type='button' value="Send" />
</div>
</template>
<script>
export default {
mounted() {
console.log('Contact has been mounted')
}
}
</script>
为了了解keep-alive组件的目的，我们将首先实现Tabs组件而不使用它们。只需使用典型的动态组件设置即可完成。
简而言之，此组件具有两个按钮，用于切换动态组件。
Tabs.vue
<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/2019/keep-alive/About.vue";
import Contact from "@/components/2019/keep-alive/Contact.vue";
export default {
components: { About, Contact },
data () {
return {
tabs: ["About", "Contact"],
component: "About"
}
}
}
</script>
现在，如果您运行您的应用程序，您应该会看到类似这样的信息。
很简单，我知道，但要点很明确。
在组件之间切换时，您应注意以下几点：
- 每次切换选项卡时，来自mount（）的消息都会打印在控制台中
- 如果在“联系人”中填写输入，然后切换选项卡，则返回时，您的输入将不存在。
这两个都是因为没有keep-alive状态，Vue会创建组件的新实例，因此所有生命周期hooks都会重新运行，并且您所做的任何输入都会丢失。
现在，让我们实现keep-alive状态。
好的。这将非常容易。
转到您的Tabs.vue父组件。您所要做的就是将动态组件包装成这样的keep-alive元素。
Tabs.vue
<keep-alive>
<component :is='component' />
</keep-alive>
现在，与以前相比，您的标签系统应具有以下功能：
- 来自mount（）的消息应该由每个组件打印一次，并且只能打印一次
- 如果您在“联系人”选项卡上填写了输入，则在切换选项卡并返回时，该输入仍应存在
虽然这是使用keep-alive组件的简单用例，但它是说明为什么要使用它们的一个很好的例子。
keep-alive具有自定义hook
关于keep-alive的组件的一件整洁的事情是，它们具有特殊的Vue生命周期hooks。这是必需的，因为keep-alive状态的组件仅运行一次其初始化hooks（创建和挂载）。
为了帮助观察何时切换keep-alive的组件，我们有两个独特的hook-这两个hook都很直观：
- .activated（） –激活keep-alive的组件时调用
- .deactivated（） –当您猜到它被停用时，会调用此函数
让我们用前面的示例实现这些hooks，以便在切换组件时将其输出到控制台。
我们可以像在VueJS中添加任何其他生命周期hook一样添加这些hook。它看起来像这样。假设我们正在编辑About.vue组件。
About.vue
mounted() {
console.log('About has been mounted')
},
activated () {
console.log('About has been activated')
},
deactivated () {
console.log('About has been deactivated')
}
现在，如果我们运行我们的应用程序并在选项卡之间切换，我们将看到挂载的消息仅打印一次，而激活/停用的消息则重复打印。
要注意的一件事是，当动态组件首次显示时，它既已安装又被激活。因此，确保您不会两次计算某些逻辑很重要。
利弊
当然，使用keep-alive而不只是默认的动态组件是有利有弊。
- 优点：存储组件缓存，更快的组件
- 缺点：容易过度使用，通常情况下已经足够好了。
对于大多数用途，仅使用默认的动态组件而无需keep-alive状态是最佳解决方案。但是，如果您想轻松保存用户状态，则keep-alive状态组件是完成此操作的超级简单方法。
就像我在上面写的那样，无论您是否选择使用keep-alive的组件，了解它们如何工作都是很有用的。建立您的编程知识工具集从来都不是一件坏事。
包裹起来…
keep-alive组件是一种非常简单的开始使用的技术。最简单的形式就是将一个wrapper元素添加到动态组件中。
保存状态并在动态组件之间快速切换非常有用。
网友评论