vue使用keep-alive實現(xiàn)數(shù)據(jù)緩存不刷新
到現(xiàn)在,接觸vue也小段時間了,項目進行到了一定程度,然而項目缺少了緩存機制,所以每次跳轉(zhuǎn)頁面都會重新created一下數(shù)據(jù),雖說系統(tǒng)的數(shù)據(jù)請求速度很快,但是這樣做對系統(tǒng)的性能會有很大的壞處的,所以到這里就要對系統(tǒng)優(yōu)化下,添加緩存了。
其實到現(xiàn)在,對于vue還是沒有玩通,每深挖一次,就會發(fā)現(xiàn)一次vue的精彩,開始不清楚要用什么實現(xiàn)緩存,找了好久,有好幾種說法,就是用vuex、vuet或者keep-alive,然后對比了一下,在我認為,vuex和vuet是實現(xiàn)狀態(tài)管理,重心是在數(shù)據(jù)處理上;想要實現(xiàn)整體的緩存,阻止created的刷新,就要用keep-alive。
所以這里我想要給大家介紹下如何用keep-alive實現(xiàn)緩存的頁面?其實很簡單,就是幾句話而已。
1、keep-alive要配合router-view使用,這里要注意一點就是,keep-alive本身是vue2.0的功能,并不是vue-router的,所以再vue1.0版本是不支持的。keep-alive官方文檔點這里,代碼實現(xiàn)如下,router-view是在入口APP.vue里面
<template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> <!--這里是其他的代碼--> </div> </template>
2、這樣就會實現(xiàn)組件的緩存,但是有個缺點就是所有組件都會被緩存,可是現(xiàn)實中就是我們有些頁面還是要及時刷新的,比如列表數(shù)據(jù),想要查看詳情的時候都是共用一個組件,只是刷新頁面,所以這個共用的組件是不能夠緩存的,不然會造成點其他的條目都是之前緩存的數(shù)據(jù)。那要怎么自定義呢,那就要在router-view里面多加個v-if判斷了,然后在router定義的文件里面在想要緩存的頁面多加上“meta:{keepAlive:true}”,不想要緩存就是“meta:{keepAlive:false}”或者不寫,只有為true的時候是會被keep-alive識別然后緩存的。
<template> <div id="app"> <!--緩存想要緩存的頁面,實現(xiàn)后退不刷新--> <!--加上v-if的判斷,可以自定義想要緩存的組件,自定義在router里面--> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> <!--這里是其他的代碼--> </div> </template>
3、在router文件加上meta判斷
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ {//home會被緩存 path:"/home", component:home, meta:{keepAlive: true} } {//hello不會被緩存 path:"/hello", component:hello, meta:{keepAlive: false} } })
想要看有沒有緩存成功,可以在各個組件的created鉤子里面打印輸出標志,緩存成功就是首次進入頁面,created會請求數(shù)據(jù),后面就不會再次請求而是直接調(diào)用緩存的
添加了緩存可以大大減少對系統(tǒng)性能的損壞,畢竟做數(shù)據(jù)處理型的系統(tǒng),數(shù)據(jù)過于龐大,每次都要請求一下頁面是很不好的,有了緩存,該緩存的緩存,不想緩存也可以實時刷新
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue封裝全局彈窗警告組件this.$message.success問題
這篇文章主要介紹了vue封裝全局彈窗警告組件this.$message.success問題,具有很的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09Vue條件循環(huán)判斷+計算屬性+綁定樣式v-bind的實例
今天小編就為大家分享一篇Vue條件循環(huán)判斷+計算屬性+綁定樣式v-bind的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09