vue中keepalive的用法优缺点,vue的keep-alive的正确用法
本文主要介绍vue的keepAlive用例的详细说明。本文通过一个简单的案例来说明对这项技术的理解和使用。以下是详细内容，有需要的朋友可以参考一下。
在开发中，从列表跳转到详情页再返回详情页时，经常需要缓存列表页的状态(比如滚动位置信息)。这时候就需要保存状态，缓存状态。vue中提供了一个keep-alive组件来缓存状态。
以下解决方案可用于解决该问题：
一、利用meta标签
1.首先，在路由的meta标签中记录keepAlive的属性为true。
路径：“/classify”，
名称：分类，
component:()=import( @/views/classify/classify . vue )，
元：{
标题：“石勒淘宝优惠券”，
keepAlive:真
}
},
2.创建路由器实例时添加scrollBehavior方法。
导出默认新路由器({
模式：“历史”，
base: process.env.BASE_URL，
路线，
scrollBehavior (to，from，savedPosition) {
if (savedPosition) {
返回保存的位置
}否则{
返回{
x: 0，
y: 0
}
}
}
})
3.将保活组件包装在需要缓存的路由器视图组件上。
点火电极
路由器视图v-if= $ route . meta . keepalive /路由器视图
/保持活力
路由器-查看v-if=！$ route . meta . keepalive /router-view
4.因为在某些情况下需要缓存，而在其他情况下不需要，所以可以在缓存组件的路由钩子函数中做出判断。
beforeRouteLeave(收件人、发件人、下一个){
this.loading=true
if (to.path===/goods_detail) {
from.meta.keepAlive=true
}否则{
from.meta.keepAlive=false
//这个。$destroy()
}
下一个()
},
您可以支持组件的缓存，但是这种方法有一个缺陷。第一，第一次打开页面时不缓存，也就是第一次从列表页跳转到详情页，再回来就不缓存了。稍后，当您进入详细信息页面时，它将被缓存。
只有第一个进入的状态会被缓存，数据不会被重新请求。如果A页选择了一个类别跳转到B页，然后从列表页B跳转到详情页，这个状态会被缓存，以后从A页的其他类别跳转到B页也不会重新缓存，这样每次从详情页返回B页都会跳转到第一个缓存的状态。当您的项目只有一个状态要缓存时，请考虑使用此方法。
二 使用include、exclude属性和beforeRouteEnter钩子函数
首先，介绍包含和排除vue文件，https://cn.vuejs.org/v2/api/#keep-alive.
是vue2.0之后的新属性。
Include是需要缓存的组件；
除了某些组件外，Exclude被缓存；
Include和exclude属性允许有条件地缓存组件。两者都可以用逗号分隔的字符串、正则表达式或数组来表示：
保持活动包括=a，b
组件：is= view /组件
/保持活力
！-正则表达式(使用“v-bind ”)-
keep-alive :include=/ab/
组件：is= view /组件
/保持活力
！-数组(使用“v-bind ”)
keep-alive :include=[a ， b]
组件：is= view /组件
/保持活力
首先检查组件自己的名称选项是否匹配，如果名称选项不可用，则匹配其本地注册的名称(父组件组件选项的键值)。匿名组件无法匹配。
Max只是在2.5.0中添加的，可以缓存的组件实例的最大数量。一旦达到该数量，在创建新实例之前，缓存组件中最长时间未被访问的实例将被销毁。
保持活动状态：max=10
组件：is= view /组件
/保持活力
activated 与 deactivated。
简单介绍一下，在keep-alive包含的组件/路由中，会多两个生命周期的钩子：激活和去激活。
文档：在2.2.0及更高版本中，树中所有嵌套组件都将触发激活和停用。
Activated在首次呈现组件时调用，然后在每次激活缓存组件时调用。
激活通话时间：
首次进入缓存路由/组件，挂载后，beforeRouteEnter守护传递给next的回调函数并调用：
Before=如果您来自另一个路由/组件(组件被破坏/缓存未激活)=mounted=激活以进入缓存组件=beforeMount=回调被执行。
因为组件是缓存的，所以当您重新输入缓存的路由/组件：//之前创建装载之前创建装载不会触发这些挂钩。
停用：当组件被停用(离开路线)时调用。
有了keep-alive，就不会调用beforeDestroy(组件销毁前的钩子)和destroyed(组件销毁)，因为组件没有销毁而是缓存了。
这个钩子可以看作是beforeDestroy的替代品。如果你缓存组件，并想在组件被销毁时做些什么，你可以把它们放在这个钩子中。
如果你离开路线，它将依次触发：
离开当前路由钩子before route Leave=route front guard before each=global rear hook after each=deactivated离开缓存组件=activated输入缓存组件(如果还输入了缓存路由，
如何在以下情况下使用项目缓存：
1.将scrollBehavior方法添加到创建的router对象中，同上；
2.在include属性中添加要缓存的组件。
keep-alive :include=[home ， classified ， search]
路由器视图/路由器视图
/保持活力
3.在beforeRouteEnter的下一个返回函数中，初始化返回的A页面不需要缓存的情况，也就是把需要写入的东西写入这里创建的；一定要写好所有需要初始化的数据，不然会有bugs所以不推荐。
beforeRouteEnter(收件人，发件人，下一个){
接下来(虚拟机={
//通过“VM”访问组件实例。
if (from.path！==/goods_detail) {//刷新前必须是从A页到B页。
vm.titleText=vm。$route.query.name
vm.categoryUpper=vm。$route.query.categoryUpper
vm.goods=[]
vm.page=1
vm.catsIndex=0
vm.is_search=false
Vm.getCats2()//是各种原创中编写的created
}
})
}
三、使用include、exclude属性和beforeRouteLeave钩子函数和vuex (推荐使用)
第三种方法与第二种类似，但不同的是，通过将需要缓存的组件保存到全局变量中，可以在routing的hook函数中灵活控制哪些组件需要缓存，哪些不需要缓存；与第二种方法相比，不需要每次重新初始化数据，但需要将数据保存在vuex中。
上部代码
1.将scrollBehavior方法添加到创建的router对象中，同上；
2.在include属性中添加要缓存的组件。
保持活动状态：include=catch_components
路由器视图/路由器视图
/保持活力
3.在存储中添加要缓存的组件的变量名，以及对应的方法；
导出默认的新Vuex。商店({
状态：{
catch_components: []
},
突变：{
GET_CATCHE_COMPONENTS(状态，数据){
state.catch_components=data
}
}
})
4.控制beforeRouteLeave钩子函数中需要缓存的组件。
Forerouteleave (to，from，next){//控制离开这个组件时需要缓存的组件，否则将是第一次不缓存。
this.busy=true
如果(到。path===/goods _ detail ){//当你到详情页时，需要缓存组件；否则，不需要缓存。
这个。$ store . commit( GET _ CATCHE _ COMPONENTS ，[home])
}否则{
这个。$ store . commit( GET _ CATCHE _ COMPONENTS ，[])
}
下一个()
},
另外，在我们的项目中，当路由相同但参数不同的情况下，组件复用且不更新时，vue官方给出了路由参数变化的响应。
观察：{
$route(目的地，出发地){
document.title=这个。$route.query.name
This.getDefault() //根据参数数据进行响应
}
},
关于vue的keepAlive的用例的详细说明这篇文章到此为止。更多关于vue的keepAlive使用的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。