vue.js keep-alive,vue中keepalive的用法优缺点

　　本文主要介绍vue中keep-alive的相关信息，帮助大家更好的理解和使用vue框架。感兴趣的朋友可以了解一下。

一、作用

　　主要用于保留组件状态或避免重新呈现。

二、用法

　　当keep-alive包装动态组件时，它缓存不活动的组件实例，而不是销毁它们。

　　Keep-alive是一个抽象组件：它本身不呈现DOM元素，也不出现在组件的父组件链中。

　　当一个组件被切换到保持活动状态时，其激活和去激活的钩子函数将被相应地执行。

三、Props

include

　　包含字符串或正则表达式。只有名称匹配的组件才会被缓存。

exclude

　　排除字符串或正则表达式。任何具有匹配名称的组件都不会被缓存。

　　Include和excludeprop允许有条件地缓存组件。两者都可以用逗号分隔的字符串、正则表达式或数组来表示：

　　！-逗号分隔的字符串-

　　保持活动包括=a，b

　　组件：is= view /组件

　　/保持活力

　　！-正则表达式(使用“v-bind ”)-

　　keep-alive :include=/ab/

　　组件：is= view /组件

　　/保持活力

　　！-数组(使用“v-bind ”)

　　keep-alive :include=[a ， b]

　　组件：is= view /组件

　　/保持活力

　　首先检查组件自己的名称选项是否匹配，如果名称选项不可用，则匹配其本地注册的名称(父组件组件选项的键值)。匿名组件无法匹配。

max

　　最大数量。可以缓存的组件实例的最大数量。

　　一旦达到该数量，在创建新实例之前，缓存组件中最长时间未被访问的实例将被销毁。

　　保持活动状态：max=10

　　组件：is= view /组件

　　/保持活力

　　以上是vue中keep-alive的详细内容。更多关于vue中keep-alive的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。