Vue keep-alive实践总结

发布日期:2019-02-24

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

经过我这次的项目实践,总结出了keep-alive的页面是一直都会缓存起来的,直到你重新数据渲染之后去改变缓存的状态。

在看文章的时候可以到官网了解一下keep-alive额

情况一:只有从详情页跳转到列表页是,列表页是上一次缓存下来的;其页面跳转到列表页,列表页重新获取数据渲染(初始化)

在App.vue中(所有这个reportingRecord.vue页面已经是会缓存起来了

<keep-alive :include="["reportingRecord"]"> <router-view></router-view></keep-alive>

在配置路由参数

  { path: "/reportingRecord" name: "reportingRecord" meta: { keepAlive: true //用于控制是否初始化页面,true:初始化页面,false:使用缓存页面

     } component: reportingRecord   }

在reportingRecord.vue(列表页)

  activated(){ if(this.$route.meta.keepAlive){ this.reportingRecord()//当时true的时候,初始化数据 } } beforeRouteLeave(to from next) { // 离开路由之前取消本页面的缓存 if (to.path == "/reportingRecordInfo") { this.$route.meta.keepAlive = false //当从reportingRecordInfo.vue页面跳转回来的时候,不要去执行初始化数据的this.reportingRecord()方法

     }else{         this.$route.meta.keepAlive = true      }      next()   }

情况二:子路由之间的切换,和详情跳转到列表页时,列表页不初始化数据;其他页面跳转到列表页再进行初始化数据(原理,思路同上,建议看懂情况一先)

在App中

<keep-alive :include="["rechargeOrder"]"> <router-view></router-view></keep-alive>

在配置路由参数

  { path: "/rechargeOrder" name: "rechargeOrder" component: rechargeOrder redirect: "/noPayPrice" children: [{ path: "/payPrice" name: "payPrice" component: payPrice } { path: "/noPayPrice" name: "noPayPrice" component: noPayPrice } ] }

在vuex存储状态

在其中一个子路由页面

  computed:{ ...mapState(["keepAlive1""keepAlive2"]) } activated() { console.log("stateka2" this.keepAlive1) if (this.keepAlive1) { this.noPayLists() } } beforeRouteLeave (to from next) { if (to.path != "/index") { this.cacheNoPay(false) console.log("1111"this.keepAlive1) }else{ this.cacheNoPay(true) this.cachePay(true) } next() }  methods:{      ...mapMutations(["cachePay""cacheNoPay"])   }

 

另一个子路由页面同理

computed:{ ...mapState(["keepAlive1""keepAlive2"]) } activated() { //初始化数据 // console.log("stateka1" this.keepAlive1) if (this.keepAlive2) { this.payLists() } } beforeRouteLeave (to from next) { if (to.path != "/index") { this.cachePay(false) }else{ this.cacheNoPay(true) this.cachePay(true) } next() }

  methods:{      ...mapMutations(["cachePay""cacheNoPay"])   }

 

总之就是在keep-alive标签中加入你要缓存的页面name,然后控制一个参数判断是否需要重新初始化

 

1 0 9)