Vue keep-alive总结
<keep-alive>
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
1
|
<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive>是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 |
prop:
- include: 字符串或正则表达式。只有匹配的组件会被缓存。
- exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
在2.1.0版本Vue中
常见用法:
1
2
3
4
5
6
7
8
9
|
// 组件 export default { name: 'test-keep-alive' , data () { return { includedComponents: "test-keep-alive" } } } |
1 <keep-alive include="test-keep-alive"> 2 <!-- 将缓存name为test-keep-alive的组件 --> 3 <component></component> 4 </keep-alive> 5 6 <keep-alive include="a,b"> 7 <!-- 将缓存name为a或者b的组件,结合动态组件使用 --> 8 <component :is="view"></component> 9 </keep-alive> 10 11 <!-- 使用正则表达式,需使用v-bind --> 12 <keep-alive :include="/a|b/"> 13 <component :is="view"></component> 14 </keep-alive> 15 16 <!-- 动态判断 --> 17 <keep-alive :include="includedComponents"> 18 <router-view></router-view> 19 </keep-alive> 20 21 <keep-alive exclude="test-keep-alive"> 22 <!-- 将不缓存name为test-keep-alive的组件 --> 23 <component></component> 24 </keep-alive>
结合router,缓存部分页面
使用$route.meta的keepAlive属性:
1 <keep-alive> 2 <router-view v-if="$route.meta.keepAlive"></router-view> 3 </keep-alive> 4 <router-view v-if="!$route.meta.keepAlive"></router-view>
需要在router
中设置router的元信息meta:
1 //...router.js 2 export default new Router({ 3 routes: [ 4 { 5 path: '/', 6 name: 'Hello', 7 component: Hello, 8 meta: { 9 keepAlive: false // 不需要缓存 10 } 11 }, 12 { 13 path: '/page1', 14 name: 'Page1', 15 component: Page1, 16 meta: { 17 keepAlive: true // 需要被缓存 18 } 19 } 20 ] 21 })
使用效果
以上面router的代码为例:
1
2
3
4
5
6
7
8
|
<!-- Page1页面 --> <template> <div class = "hello" > <h1>Vue</h1> <h2>{{msg}}</h2> <input placeholder= "输入框" ></input> </div> </template> |
1
2
3
4
5
6
|
<!-- Hello页面 --> <template> <div class = "hello" > <h1>{{msg}}</h1> </div> </template> |
(1) 在Page1页面输入框输入“asd”,然后手动跳转到Hello页面;
(2) 回到Page1页面发现之前输入的"asd"依然保留,说明页面信息成功保存在内存中;
图1 进入Page1页面,并输入"asd"
图2 跳转到Hello
图3 返回Page1页面,输入框数据会被保留
当然,也可以通过动态设置route.meta的keepAlive属性来实现其他需求,
- 首页是A页面
- B页面跳转到A,A页面需要缓存
- C页面跳转到A,A页面不需要被缓存
思路是在每个路由的beforeRouteLeave(to, from, next)
钩子中设置to.meta.keepAlive
:
A的路由:
1
2
3
4
5
6
7
8
|
{ path: '/' , name: 'A' , component: A, meta: { keepAlive: true // 需要被缓存 } } |
1
2
3
4
5
6
7
8
9
10
11
|
export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 设置下一个路由的 meta to.meta.keepAlive = true ; // B 跳转到 A 时,让 A 缓存,即不刷新 next(); } }; |
1
2
3
4
5
6
7
8
9
10
11
|
export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 设置下一个路由的 meta to.meta.keepAlive = false ; // C 跳转到 A 时让 A 不缓存,即刷新 next(); } }; |
亲测有效哦~
1
|
keep-alive生命周期钩子函数:activated、deactivated |
使用<keep-alive>
会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated
阶段获取数据,承担原来created钩子中获取数据的任务。
记录一个vue的后台管理项目-多标签组件的实现: 效果图大概是这样的:
点击左侧的菜单栏,会打开相应的标签页,这些标签可以关闭,可以切换; 使用的框架是vue,使用的UI库是element,另外还使用到vue-router和vuex
组成Layout的是:模块组件名称头部Header左侧菜单LeftMenu标签页栏TagsView主视口AppMain本文单就TagsView进行笔记记录 TagsView主要功能: 1.生成打开过的路由,对应当前路由的标签是active状态; 2.切换路由; 3.关闭页签; 4.打开的标签过多,超出容器宽的话,在容器上面可以使用滚轮上下切换(本项目的模块是按照业务划分的,由于放置滚轮的容器是与整个多标签组件并无业务关联的,那么滚轮容器是单独拿出来的一个组件,有自己的滚轮事件,留出slot插槽放入TagsView)
对于多标签页来说,每一个标签是一个router-link,而生成这些标签router-link最重要的是浏览过的路由的记录,并且监听着路由的改变;本项目使用了vuex去记录浏览过的路由;
先说说多标签页的vuex配置:
在store/modules/下新建tagsview.js,具体的提交方法会在组件中用到的时候详细分析const tagsview ={ state:{ visitedviews:[],//存放所有浏览过的且不重复的路由数据 }, mutations:{//这 ADD_VISITED_VIEWS:(state,view)=>{//打开新页签--添加路由数据的方法 if(state.visitedviews.some(v=>v.path==view.path))return; state.visitedviews.push({ name:view.name, path:view.path, title:view.meta.title || 'no-title' }) }, DEL_VISITED_VIEWS:(state,view)=>{//关闭页签--删除路由数据的方法 for(let [i,v] of state.visitedviews.entries()){ if(v.path == view.path){ state.visitedviews.splice(i,1) break } } } }, actions:{//调用这里去触发mutations,如何调用?在组件内使用this.$store.dispatch('action中对应名字', 参数) addVisitedViews({commit},view){//通过解构赋值得到commit方法 commit('ADD_VISITED_VIEWS',view)//去触发ADD_VISITED_VIEWS,并传入参数 }, delVisitedViews({commit,state,view){//删除数组存放的路由之后,需要再去刷新路由,这是一个异步的过程,需要有回掉函数,所以使用并返回promise对象,也可以让组件在调用的时候接着使用.then的方法 //commit('DEL_VISITED_VIEWS',view) return new Promise((resolve)=>{//resolve方法:未来成功后回掉的方法 commit('DEL_VISITED_VIEWS',view); resolve([...state.visitedviews]); }) }
}}export default tagsview123456789101112131415161718192021222324252627282930313233343536这个moudle写完了之后,别忘记放在Vuex.Store实例中去
import Vue from 'vue';import Vuex from 'vuex';import tagsview from './modules/tagsview.js'import getters from './getter.js'
Vue.use(Vuex)const store= new Vuex.Store({ modules:{ tagsview }, getters})
export default store1234567891011121314另外getters.js是这样的:
const getters ={ visitedviews:state => state.tagsview.visitedviews}export default getters1234TagsView.vue:
标签页的初始渲染<template id=""> <div class="tags-view-container"> <scroll-panel class="tags-view-wrap"> <router-link v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path" class="tags-view-item" :class="isActive(tag)?'active':''"> {{tag.title}} <span class='el-icon-close' @click.prevent.stop="delSelectTag(tag)"></span> </router-link> </scroll-panel> </div></template>12345678910scroll-panel :容器组件
visitedViews来自计算属性:
computed:{ visitedViews(){//store中取值 return this.$store.state.tagsview.visitedviews } },12345isActive()方法是用来判断页签的路由是否为当前路由
methods:{ isActive(route){ return route.path == this.$route.path }, }12345打开一个标签页另外,点击左侧菜单树,或者点击其他的tab页签,会导致路由的改变,那么就需要一个watcher
watch:{ $route(){ this.addViewTags(); } },12345addViewTags()方法是在路由改变时候触发的,会去提交store中的addVistitedViews方法,该方法会根据state中存放的路由数据来判断新打开的路由之前有没有存放过,如果没有push到数组中去,数组会进行改变
methods:{ addViewTags(){//路由改变时执行的方法 if(this.$route.name){ const route = this.$route this.$store.dispatch('addVisitedViews',route); } }, }12345678关闭一个标签页: delSelectTag()方法用来关闭一个标签页,在此会执行提交store中delVisitedViews方法,需要在该方法执行完删除数组中的数据后,再进行更改路由;methods:{ delSelectTag(route){//先提交删除数据的方法,数组删除出掉数据后,如果关闭的是当前打开的路由需要将路由改为数组最后一次push进去的路由 this.$store.dispatch('delVisitedViews',route).then((views)=>{ if(this.isActive(route)){//只有在关闭当前打开的标签页才会有影响 let lastView = views.slice(-1)[0]//选取路由数组中的最后一位 if(lastView){ this.$router.push(lastView); }else{ this.$router.push('/'); } } }) } }————————————————版权声明:本文为CSDN博主「喵大嗷」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/connie_0217/article/details/79523955