vue keep-alive詳解

keep-alive

keep-alive是Vue提供的一個抽象組件姻僧,用來對組件進(jìn)行緩存是掰,從而節(jié)省性能胃珍,由于是一個抽象組件甸昏,所以在v頁面渲染完畢后不會被渲染成一個DOM元素

<keep-alive>
    <loading></loading>
</keep-laive>

當(dāng)組件在keep-alive內(nèi)被切換時組件的activated耐薯、deactivated這兩個生命周期鉤子函數(shù)會被執(zhí)行
被包裹在keep-alive中的組件的狀態(tài)將會被保留馆里,例如我們將某個列表類組件內(nèi)容滑動到第100條位置,那么我們在切換到一個組件后再次切換回到該組件可柿,該組件的位置狀態(tài)依舊會保持在第100條列表處
關(guān)于這一點也是仁者見仁鸠踪,有的產(chǎn)品可能會要求在每一次進(jìn)入一個組件時頁面的初始位置都是保持在頂部的,這里可以利用Vue中的滾動行為复斥,但是前提是你是HTML5 history模式
我們在創(chuàng)建一個router實例的時候营密,可以提供一個scrollBehavior方法,該方法會在用戶切換路由時觸發(fā)

const router=new VueRouter({
        routes:[
            {
                path:"/",
                component:Home
            }
        ],
        scrollBehavior(to,form,savedPosition){
        //scrollBehavior方法接收to目锭,form路由對象
        //第三個參數(shù)savedPosition當(dāng)且僅當(dāng)在瀏覽器前進(jìn)后退按鈕觸發(fā)時才可用
        //該方法會返回滾動位置的對象信息评汰,如果返回false纷捞,或者是一個空的對象,那么不會發(fā)生滾動
        //我們可以在該方法中設(shè)置返回值來指定頁面的滾動位置被去,例如:
         return {x:0,y:0}
        //表示在用戶切換路由時讓是所有頁面都返回到頂部位置
        //如果返回savedPosition,那么在點擊后退按鈕時就會表現(xiàn)的像原生瀏覽器一樣主儡,返回的頁面會滾動過到之前按鈕點擊跳轉(zhuǎn)的位置,大概寫法如下:
         if(savedPosition){
            return savedPosition
         }else{
           return {x:0,y:0}
         }
         //如果想要模擬滾動到錨點的行為:
         if(to.hash){
           return {
             selector:to.hash
           }
         }
     }
})

還有一個方法就是利用我們上面說過的惨缆,在keep-alive激活會觸發(fā)activated鉤子函數(shù)糜值,那么在該函數(shù)內(nèi)設(shè)置scrollTop為0

被keep-alive包裹的動態(tài)組件或router-view會緩存不活動的實例,再次被調(diào)用這些被緩存的實例會被再次復(fù)用坯墨,對于我們的某些不是需要實時更新的頁面來說大大減少了性能上的消耗寂汇,不需要再次發(fā)送HTTP請求,但是同樣也存在一個問題就是被keep-alive包裹的組件我們請求獲取的數(shù)據(jù)不會再重新渲染頁面捣染,這也就出現(xiàn)了例如我們使用動態(tài)路由做匹配的話頁面只會保持第一次請求數(shù)據(jù)的渲染結(jié)果骄瓣,所以需要我們在特定的情況下強制刷新某些組件

1.利用include、exclude屬性

<keep-alive include="bookLists,bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

include屬性表示只有name屬性為bookLists耍攘,bookLists的組件會被緩存榕栏,(注意是組件的名字,不是路由的名字)其它組件不會被緩存exclude屬性表示除了name屬性為indexLists的組件不會被緩存蕾各,其它組件都會被緩存

2.利用meta屬性

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被緩存的組件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被緩存的組件
 } 
]
<keep-alive>
  <router-view v-if="this.$route.meat.keepAlive"></router-view>
  <!--這里是會被緩存的組件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--這里是不會被緩存的組件-->

3 官方提出的解決方案響應(yīng)路由參數(shù)的變化

4 利用berforeRouteEnter實現(xiàn)前進(jìn)刷新臼膏,后退緩存資料

5 利用第三方插件實現(xiàn)前進(jìn)刷新,后退不緩存

轉(zhuǎn)載自http://www.reibang.com/p/4b55d312d297

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末示损,一起剝皮案震驚了整個濱河市渗磅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌检访,老刑警劉巖始鱼,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異脆贵,居然都是意外死亡医清,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進(jìn)店門卖氨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來会烙,“玉大人,你說我怎么就攤上這事筒捺“啬澹” “怎么了?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵系吭,是天一觀的道長五嫂。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么沃缘? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任躯枢,我火速辦了婚禮,結(jié)果婚禮上槐臀,老公的妹妹穿的比我還像新娘锄蹂。我一直安慰自己,他們只是感情好水慨,可當(dāng)我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布得糜。 她就那樣靜靜地躺著,像睡著了一般讥巡。 火紅的嫁衣襯著肌膚如雪掀亩。 梳的紋絲不亂的頭發(fā)上舔哪,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天欢顷,我揣著相機與錄音,去河邊找鬼捉蚤。 笑死抬驴,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的缆巧。 我是一名探鬼主播布持,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼陕悬!你這毒婦竟也來了题暖?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤捉超,失蹤者是張志新(化名)和其女友劉穎胧卤,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拼岳,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡枝誊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了惜纸。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片叶撒。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖耐版,靈堂內(nèi)的尸體忽然破棺而出祠够,到底是詐尸還是另有隱情,我是刑警寧澤粪牲,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布哪审,位于F島的核電站,受9級特大地震影響虑瀑,放射性物質(zhì)發(fā)生泄漏湿滓。R本人自食惡果不足惜滴须,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望叽奥。 院中可真熱鬧扔水,春花似錦、人聲如沸朝氓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽赵哲。三九已至待德,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間枫夺,已是汗流浹背将宪。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留橡庞,地道東北人较坛。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像扒最,于是被迫代替她去往敵國和親丑勤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容