vue中keepalive,vue中keepalive用法
本文主要介绍vue内置组件keep-alive的使用实例，帮助你更好的理解和学习使用Vue。感兴趣的朋友可以了解一下。
目录
I .保活用法示例：
1.缓存所有页面：2。根据条件缓存一些页面。
3.结合vue-router缓存一些页面。2.保活生命周期
1.激活的
2.无效的
Keep-alive是Vue内置的组件之一，主要用于保持组件的状态或者避免重渲染。
功能
组件切换过程中，状态保存在内存中，避免了DOM的重复渲染，减少了加载时间和性能消耗，提高了用户体验。
一、keep-alive 用法
当keep-alive包装动态组件时，它缓存不活动的组件实例，而不是销毁它们。
与transition类似，keep-alive是一个抽象组件：它本身不呈现DOM元素，也不出现在组件的父组件链中。
当一个组件被切换到保持活动状态时，其激活和去激活的钩子函数将被相应地执行。
道具：
包含字符串或正则表达式。只有名称匹配的组件才会被缓存。
排除字符串或正则表达式。任何具有匹配名称的组件都不会被缓存。
最大数量。可以缓存的组件实例的最大数量。
包括排除
如果只想缓存某些组件的状态，可以使用include属性。
如果希望在缓存其他组件之前删除一些组件，可以使用exlucde属性。
最大
可以缓存的组件实例的最大数量。一旦达到该数量，在创建新实例之前，缓存组件中最长时间未被访问的实例将被销毁。
保持活动状态：max=10
组件：is= view /组件
/保持活力
使用示例：
1.缓存所有页面：
点火电极
路由器视图/路由器视图
！-以下是将被缓存的组件-
/保持活力
2.根据条件缓存部分页面
(更多用法见官网API)
模板
div id=应用程序
//1.组件名称新闻列表或产品列表将被缓存。
keep-alive include=新闻列表，产品列表
路由器-视图/
/保持活力
//2.组件名测试将不会被缓存。
保持活动排除=test
路由器-视图/
/保持活力
/div
/模板
脚本
导出默认值{
名称：“应用程序”
}
/脚本
注意：
还有一步，必须在需要缓存的组件的脚本部分给组件添加一个name属性。如果没有使用保持活动来缓存状态的组件，则可以省略name属性。但是，如果keep-alive用于缓存该组件的状态，则该组件必须具有该属性。此外，该属性的值必须与标记中include属性的值完全相同，包括大小写。以productList.vue组件为例
模板
！-下面是productList组件的html结构部分-
/模板
脚本
导出默认值{
Name: productList ，//如果keep-alive用于缓存此组件的状态，则此组件必须具有此属性。
data(){
返回{}
}
/脚本
3.结合vue-router，缓存部分页面
导出默认新路由器({
模式：“历史”，
路线：[
{
路径：“/”，
姓名：家，
成分：家，
儿童：[
{
路径：“产品”，
名称：产品，
成分：产品，
元：{
KeepAlive: true //需要缓存
}
},
{
路径：“新闻详细信息”，
名称：新闻详细信息，
组件：新闻细节，
元：{
KeepAlive: false //不需要缓存
}
}
]
}
]
})
在App.vue中
模板
div id=应用程序
点火电极
路由器视图v-if= $ route . meta . keepalive /路由器视图
/保持活力
路由器-查看v-if=！$ route . meta . keepalive /router-view
/div
/模板
脚本
导出默认值{
名称：“应用程序”
}
/脚本
二、keep-alive 生命周期
包括keep-alive中创建的组件，生命周期还会有两个钩子：激活和停用。
1. activated
激活保活组件时调用。
该组件在第一次呈现时被调用，然后在每次激活缓存组件时被调用。
首次进入缓存路由/组件，挂载后，beforeRouteEnter守护传递给next的回调函数并调用：
页面刚进入时，钩子触发的顺序是创建-挂载-激活。
因为组件已被缓存，所以当您再次输入缓存的路线/组件时，不会触发这些挂钩：
在创建之前在装载之前装载不会触发。
2. deactivated
当保持活动组件被停用(离开路由)时调用。
有了keep-alive，就不会调用beforeDestroy(组件销毁前的钩子)和destroyed(组件销毁)，因为组件没有销毁而是缓存了。
这个钩子可以看作是beforeDestroy的替代品。如果你缓存组件，并想在组件被销毁时做些什么，你可以把它们放在这个钩子中。
注意：
1.使用keep-alive会将数据保留在内存中。如果想在每次进入页面时都获取最新的数据，就需要在激活阶段获取数据，在最初创建的hook函数中承担获取数据的任务。
2.这两个生命周期函数只有在组件被包装在keep-alive中时才会被调用。如果它们作为普通组件使用，就不会被调用。而在2.1.0版本之后，即使被包裹在keep-alive中，这两个钩子函数在使用exclude之后依然不会被调用！
3.服务器端渲染时不调用以上两个钩子函数。
官方文件：cn.vuejs.org/v2/api/#kee…
以上是Vue内置组件keep-alive的使用实例的详细说明。更多关于Vue内置组件keep-alive的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。