详细解释Vue中组件的缓存

文章《Vue一个案例引发的动态组件与全局事件绑定总结》中简要提到了组件的缓存。当时我们只是提供了一个解决问题的方案，并没有谈到缓存了多少组件。今天，我们将详细讨论组件缓存。

在组件开发模式下，我们将整个项目拆分成许多组件，并以合理的方式进行组织。

自然，存在组件之间切换的问题。Vue中有一个“动态组件”的概念，可以让我们更好地切换组件。

在实际的项目开发中，产品不可能放过我们，需求总是在变化。如果你遇到那些不改变需求的产品，就嫁给他们。太罕见了。

在最近的项目中，需要实现保留最后一个Tab页的功能。如下图所示，当我选择B组件时，我希望当我从主页切换到设置页面时，我会停留在B组件中，而不是将其重新渲染为默认的A组件。

首先，我们可以使用内置组件来实现动态组件的效果。

template div button v-for=' Tab in Tab ' : key=' Tab ' @ click=' current Tab=Tab '/button component : is=' current Tab '/component/div/templatescript export default { name : ' Tab '，data(){ return { current Tab 3360 ' A '，Tab 3360[' A '，' B ']}；}};/script此时，我们在两个组件之间切换，但是在切换动态组件的过程中，组件的实例被“重新创建”，我们需要保持组件的状态。

要解决这个问题，您还需要使用keep-alive，这是vue的内置组件。

点火电极

当保活包装动态程序集时，它会缓存非活动的程序集实例，而不是销毁它们。它是一个抽象组件，不会将自己呈现为DOM元素，也不会出现在父组件链中。

值得注意的是，“动态程序集”这个词只有在包含动态程序集时才会有效果。如果不是动态组件，则无效。例如，以下用法没有效果。

保持活动状态我的组件/我的组件/保持活动状态在这种情况下，让我们看看几种常见的保持活动状态的方法：

方案一：使用内置组件。

保活组件：是=' view '/组件/保活方案2:条件判断发生时的子组件

保活comp-av-if=' a 1 '/comp-a comp-b v-else/comp-b/保活方案3:与路由结合时，

将缓存保持活动的路由器视图/路由器视图/保持活动组件。另外要注意的是，只有当只有一个子组件时，才能使用保活。如果你有v-for在里面，那就没用了。

当我们知道如何使用保活时，我们只需要保持我们的标签页。

Keep-alive路由器-view/router-view/keep-alive，但是在这里你会发现我们缓存了每个组件，不仅是案例中的“设置页面”，还有“主页”，这不是我们想要的。

Vue帮助我们考虑这一点，所以我们可以有选择地缓存组件，也就是说，你可以缓存任何你想要的人，这是非常自由和可配置的。

原因是保活提供了两个属性，包括和排除。

Include:将只缓存具有匹配名称的组件。排除：名称匹配的任何组件都不会被缓存。两者都可以用逗号分隔的字符串、正则表达式或数组来表示。

Keep-alive include=' a，b '/Keep-alive keep-alive : include='/a | b/'/keep-alive keep-alive : include='[' a '，' b']'/keep-alive因此，组合keep。

保持活动包括='系统'路由器-视图/路由器-视图/保持活动，这样我们可以只缓存“设置页面”，然后保持上次选择的选项卡页面。

以上是边肖介绍的Vue中组件缓存的详细说明和集成。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！