vue中keep-alive组件利用和一些基础设置方法

Vue中的keep-alive组件是一个抽象组件，它可以在组件切换时缓存(缓存时机可以由开发职员自界说)被缓存的组件实例以提高应用程序的性能体现。

利用keep-alive组件非常简朴，只需在需要缓存的组件外层包裹一个keep-alive组件即可。例如：

在上面的代码中，我们把需要被缓存的组件[code]component-to-be-cached[/code]包裹在了keep-alive组件内，这样该组件实例在离开视图时会被缓存，再次进入视图时则会直接从缓存中读取对应的实例进行复用，避免了重复的创建和销毁实例，提高了性能体现。

别的，keep-alive组件提供了一系列的生命周期钩子函数，我们可以通过这些钩子函数来控制缓存时机和缓存哪些组件实例。常用的生命周期钩子函数有：

• activated：当组件被激活时调用，此时组件已经被缓存。
• deactivated：当组件被停用时调用，此时组件将被缓存。

通过在需要被缓存的组件内界说这两个生命周期函数来控制组件缓存的时机和操作，例如：

总之，keep-alive组件可以非常方便地帮助我们提高Vue应用程序的性能体现，特殊是对于那些需要频仍切换的组件，利用keep-alive缓存组件实例可以更加有效的淘汰DOM操作和组件实例的创建和销毁。

在Vue中利用<[code]keep-alive>[/code]组件可以将组件缓存起来，提高页面的性能。可以通过设置[code]include[/code]和[code]exclude[/code]属性来设置缓存的白名单和黑名单。

include

[code]include[/code]属性可以指定哪些组件需要被缓存。它可以是一个字符串或正则表达式，也可以是一个返回字符串或正则表达式的函数。详细利用方式如下：

字符串：

正则表达式：

函数：

exclude

[code]exclude[/code]属性可以指定哪些组件不需要被缓存。它同样可以是一个字符串、正则表达式或函数。利用方式雷同[code]include[/code]：

字符串：

正则表达式：

函数：

需要注意的是，[code]include[/code]和[code]exclude[/code]属性不能同时利用，否则会导致缓存出现问题。

在Vue中，可以通过设置keep-alive组件的include和exclude属性来设置白名单和黑名单。

下面是一个例子：

在上面的代码中，我们设置了[code]includeComponents[/code]和[code]excludeComponents[/code]这两个变量来控制白名单和黑名单。其中，[code]includeComponents[/code]是一个数组，包罗了需要缓存的组件名，而[code]excludeComponents[/code]是一个数组，包罗了不需要缓存的组件名。

在Vue中，我们还可以通过设置[code]max[/code]属性来设定缓存的最大数目，如下所示：

在上面的代码中，我们设置了最大缓存数目为10个，当缓存的组件凌驾了这个数目时，开始缓存的组件会被销毁。

除了上述属性外，Vue还提供了一些其他的设置选项，如[code]include[/code]和[code]exclude[/code]的详细用法可以参考Vue官方文档。

到此这篇关于vue中keep-alive组件利用和一些基础设置的文章就介绍到这了,更多相干vue keep-alive组件利用内容请搜索脚本之家从前的文章或继承欣赏下面的相干文章希望大家以后多多支持脚本之家！