vue中keep-alive,vue中keepalive的用法优缺点
在开发中，从列表跳转到详情页再返回详情页时，经常需要缓存列表页的状态(比如滚动位置信息)。这时候就需要保存状态，缓存状态。
目录
前言keep-avlive钩子函数keep-avlive缓存汇总了哪些组件和注意事项
前言
Keep-alive是Vue的内置组件。当它包装动态组件时，它缓存不活动的组件实例，而不是销毁它们。
组件切换过程中，状态保存在内存中，避免了DOM的重复渲染，减少了加载时间和性能消耗，提高了用户体验。使用模式是
点火电极
组件/
/保持活力
这里的组件将被缓存。
keep-avlive钩子函数
在keep-alive中创建的组件将有两个生命周期挂钩：激活和停用。Activated:当keep-alive组件被激活时调用，keep-alive将把数据保存在内存中。如果想在每次进入页面时获取最新的数据，需要在激活阶段获取数据，在最初创建的hook函数中承担获取数据的任务。
停用：当保持活动组件被停用时调用。如果使用keep-alive，那么销毁前和销毁后的钩子都不会被调用。因为组件没有被销毁，而是被缓存，所以停用的钩子可以被看作是销毁前和销毁后钩子的替代，比如清除localStorge数据。
keep-avlive缓存哪些组件
Keep-avlive通过两种方式缓存哪些组件，一种是通过keep-avlive组件提供的include和exclude属性，另一种是通过route中meta属性的设置。
使用include和exclude属性完成缓存组件设置。
/*将缓存名为test的组件*/
保持活动包括=test
路由器-视图/
/保持活力
使用include缓存名为test的组件。
保持活动排除=test
路由器-视图/
/保持活力
使用exclude，组件名测试将不会被缓存。
使用路由到缓存组件中meta属性的设置，例如
导出默认新路由器({
模式：“历史”，
路线：[
{
路径：“/”，
姓名：家，
成分：家，
重定向：“商品”，
儿童：[
{
路径：“商品”，
名称：货物，
成分：商品，
元：{
KeepAlive: false //不需要缓存
}
},
{
路径：“评级”，
名称：“评级”，
组成部分：评级，
元：{
KeepAlive: true //需要缓存
}
}
]
}
]
})
商品组件需要缓存，但评级不需要。使用中的以下语句动态完成组件缓存设置，设置代码如下
模板
div id=应用程序
点火电极
路由器视图v-if= $ route . meta . keepalive /路由器视图
/保持活力
路由器-查看v-if=！$ route . meta . keepalive /router-view
/div
/模板
例子
设置两个组件，KeepCom1，KeepCom2，KeepCom1设置缓存，KeepCom2不设置缓存。同时测试两个钩子函数的使用。这里，路由元用于设置缓存组件。
KeepCom1代码如下：
模板
div class=wrapper
ul class=content/ul
button class= Add id= Add @ click= Add 添加子元素/按钮
/div
/模板
脚本
导出默认值{
名称： keepCom1 ，
方法：{
add () {
let ul=document . getelementsbyclassname( content )[0]
让li=document.createElement(li )
Li.innerHTML=我是添加的元素
ul.appendChild(李)
}
},
已激活(){
Console.log(缓存激活的执行)
},
停用(){
Console.log(缓存停用的执行)
}
}
/脚本
风格
/风格
KeepCom2代码如下：
模板
div class=wrapper
ul class=content/ul
button class= Add id= Add @ click= Add 添加子元素/按钮
/div
/模板
脚本
导出默认值{
名称：“keepCom2”，
方法：{
add () {
let ul=document . getelementsbyclassname( content )[0]
让li=document.createElement(li )
Li.innerHTML=我是添加的元素
ul.appendChild(李)
}
},
已激活(){
Console.log(缓存激活的执行)
},
停用(){
Console.log(缓存停用的执行)
}
}
/脚本
风格
/风格
KeepCom1和KeepCom2的代码基本相同，都是给页面添加节点。
KeepAvliveTest代码如下
模板
div align= center style= margin-top:20px；
到=/keepavlivetest/keepcom1 的路由器链接使用缓存/路由器链接
到=/keepavlivetest/keepcom2 的路由器链接不使用缓存/路由器链接
点火电极
路由器视图v-if= $ route . meta . keepalive /路由器视图
/保持活力
路由器-查看v-if=！$ route . meta . keepalive /router-view
/div
/模板
脚本
导出默认值{
名称：“keepAvliveTest”
}
/脚本
风格
/风格
keepcom1和keepcom2的组件进行了切换，执行后的结果如下
Keepcom1使用缓存。切换页面时，最后添加的三个元素还在，钩子函数执行。Keepcom2不使用缓存。切换页面时，上次添加的一个元素不存在，恢复到初始状态。而且这两个挂钩都没有执行。
小结及注意事项
设置页面缓存时，建议使用router中的meta标签，这样代码耦合度低。Keep-alive首先匹配所包含组件的名称字段，如果名称不可用，则匹配当前组件组件配置中的注册名称。包括在keep-alive中，但符合exclude、activated和deactivated的不会被调用。
以上是详细讲解keepAlive在vue前端开发中的使用的详细内容。更多关于vue前端的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。