2023年11月25日发(作者：)
vue中使⽤keepAlive及使⽤后⽣命周期的改变
使⽤keepAlive缓存页⾯，⼀可以减少服务器请求次数，⼆则可以在⽤户返回上⼀页后记忆到上次浏
览位置（ios端微信浏览器不适⽤，不兼容，需要另⾏配置：见例⼦(1)）
keep-alive的介绍如下：
1，把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。
2、
3、当组件在
注：在 2.2.0 及其更⾼版本中，activated 和 deactivated 将会在
基本⽤法：使⽤keep-alive直接包裹组件
//使⽤keep-alive直接包裹组件
//注：
如果需要缓存整个项⽬，则如下设置(直接包裹根router-view即可)：
缓存部分页⾯或者组件，使⽤route.meta属性
1、在中设置：（根据是否需要缓存切换模式）
2、在路由页设置：
{
path: '/demo/demoIndex',
name: 'DemoIndex',
component: DemoIndex,
meta: {
keepAlive: true, //设置keepAlive为true,则⾥的$ive即为true
title:'⽰例页⾯'
}
}
注：配置了keepAlive的页⾯，在再次进⼊时不会重新渲染，该页⾯内的组件同理不会再次渲染。
⽽这可能会导致该组件内的相关操作（那些每次都需要重新渲染页⾯的操作：如⽗⼦组件间的传值）不再⽣效。
这⼀点可能会导致⼀些莫名其妙⽽⼜⽆从查证的bug（我今天便遇到了，最后查出是页⾯使⽤了keepalive导致
的，2020-06-30），请知悉。
使⽤新增属性include/exclude
vue2.1.0 新增了include，exclude俩个属性，允许组件有条件的缓存。⼆者都可以⽤逗号分隔字符串、正则表达式或⼀个数组来表⽰。
注：匹配⾸先检查组件⾃⾝的 name 选项，如果 name 选项不可⽤，则匹配它的局部注册名称 (⽗组件 components 选
项的键值)。匿名组件不能被匹配。
动态判断，使⽤v-bind:include
includedComponents动态设置即可
使⽤beforeRouteLeave或者afterEach中进⾏拦截处理
如在项⽬在Category组件中的设置：
beforeRouteLeave(to,from,next){
if(=='DemoIndex'){
if(!ive){
ive=true
}
next()
}else{
ive=false
ive=false
next()
}
},
在beforeRouteLeave中根据具体的路由进⾏动态缓存设置。
⽣命周期变化及举例说明
正常⽣命周期：beforeRouteEnter --> created --> mounted --> updated -->destroyed
使⽤keepAlive后⽣命周期：
注：
1、这⾥的activated⾮常有⽤，因为页⾯被缓存时，created,mounted等⽣命周期均失效，你若想进⾏⼀些操作，那么
可以在activated内完成(下⾯会举个栗⼦：列表页回到上次浏览位置)
2、activated keep-alive组件激活时调⽤，该钩⼦在服务器端渲染期间不被调⽤。
3、deactivated keep-alive组件停⽤时调⽤，该钩⼦在服务端渲染期间不被调⽤。
举个栗⼦(1)：列表页回到上次浏览位置
条件：1、列表页不可使⽤懒加载延迟加载数据，2、列表页需要使⽤keepAlive缓存
beforeRouteLeave(to,from,next){ //离开页⾯之前将⾼度存储到sessionStorage。这⾥不建议⽤localStorage，因为session在关闭浏览器时会⾃动清除，⽽local则需要⼿动清除，
m('scrollH',mentById('demo').scrollTop)
next()
},
activated(){ //在activated⽣命周期内，从sessionStorage中读取⾼度值并设置到dom
if(m('scrollH')){
mentById('demo').scrollTop=m('scrollH')
}
},
发布评论