keep-alive是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
keep-alive是什么? keep-alive是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 Props: include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。 用法: 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 <keep-alive> 不会在函数式组件中正常工作,因为它们没有缓存实例。 使用场景 本文讲以最常见的 列表页>详情页>列表页 需要保持上一次列表状态的情况为例讲解,这里主要用到了keep-alive的生命周期activated和sessionStorage。 推荐直接用include或者exclude方式,简洁高效。 1、首先给需要缓存的组件添加name属性,如下: //列表页 export default { name: 'list',//组件的名字 data() { return {} } } 2、在组件关联的router-view上添加keep-alive,并加入include属性,填入我们的组件名list,如下: //App主入口 <template> <keep-alive :include="keepAliveArr"> <router-view></router-view> </keep-alive> </template> export default { name: 'App', data() { return { keepAliveArr: ['list'] //需要缓存的组件的名字(vue文件中的名字) } } } 注:include和exclude接受字符串、数组和正则,我们可以根据项目需要自行添加需要/不需要缓存的组件名。 3、在缓存的组件中加入activated生命周期用来排除从其它页面进入的情况: //列表页 export default { name: 'list', data() { return {} }, activated() { if(!window.sessionStorage.getItem('needCache')) { this.getData(1, true); //非详情页进来需要请求数据 } else { window.sessionStorage.removeItem('needCache') //及时清除 } }, methods: { goDetail() { window.sessionStorage.setItem('needCache', true); //进入关联页面前存个标识,可以使用 window.sessionStorage.removeItem('needCache') 移除标识 this.$router.push({ path: '/detail', query: { id: 'xxx' } }) } } } 注意事项 include和exclude中是组件的名字,而不是路由的名字; keep-alive必须加在组件直接关联的router-view上(有多个router-view的情况下要注意)。