Vue / keep-alive

keep-alive

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

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

當(dāng)組件在keep-alive內(nèi)被切換時(shí)組件的activated、deactivated這兩個(gè)生命周期鉤子函數(shù)會被執(zhí)行

被包裹在keep-alive中的組件的狀態(tài)將會被保留睡陪,例如我們將某個(gè)列表類組件內(nèi)容滑動(dòng)到第100條位置寺渗,那么我們在切換到一個(gè)組件后再次切換回到該組件,該組件的位置狀態(tài)依舊會保持在第100條列表處

image

關(guān)于這一點(diǎn)也是仁者見仁兰迫,有的產(chǎn)品可能會要求在每一次進(jìn)入一個(gè)組件時(shí)頁面的初始位置都是保持在頂部的信殊,這里可以利用Vue中的滾動(dòng)行為,但是前提是你是HTML5 history模式
我們在創(chuàng)建一個(gè)router實(shí)例的時(shí)候汁果,可以提供一個(gè)scrollBehavior方法涡拘,該方法會在用戶切換路由時(shí)觸發(fā)

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

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

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

  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實(shí)現(xiàn)前進(jìn)刷新循帐,后退緩存資料

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

作者:羊烊羴
鏈接:http://www.reibang.com/p/4b55d312d297
來源:簡書
簡書著作權(quán)歸作者所有舀武,任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處拄养。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市银舱,隨后出現(xiàn)的幾起案子瘪匿,更是在濱河造成了極大的恐慌跛梗,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件棋弥,死亡現(xiàn)場離奇詭異核偿,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)顽染,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進(jìn)店門宪祥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人家乘,你說我怎么就攤上這事〔匕模” “怎么了仁锯?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長翔悠。 經(jīng)常有香客問我业崖,道長,這世上最難降的妖魔是什么蓄愁? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任双炕,我火速辦了婚禮,結(jié)果婚禮上撮抓,老公的妹妹穿的比我還像新娘妇斤。我一直安慰自己,他們只是感情好丹拯,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布站超。 她就那樣靜靜地躺著,像睡著了一般乖酬。 火紅的嫁衣襯著肌膚如雪死相。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天咬像,我揣著相機(jī)與錄音算撮,去河邊找鬼。 笑死县昂,一個(gè)胖子當(dāng)著我的面吹牛肮柜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播七芭,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼素挽,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了狸驳?” 一聲冷哼從身側(cè)響起预明,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤缩赛,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后撰糠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體酥馍,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年阅酪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了旨袒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,852評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡术辐,死狀恐怖砚尽,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情辉词,我是刑警寧澤必孤,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站瑞躺,受9級特大地震影響敷搪,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜幢哨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一赡勘、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧捞镰,春花似錦闸与、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至冰评,卻和暖如春映胁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背甲雅。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工解孙, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人抛人。 一個(gè)月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓弛姜,卻偏偏與公主長得像,于是被迫代替她去往敵國和親妖枚。 傳聞我的和親對象是個(gè)殘疾皇子廷臼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評論 2 361

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

  • https://www.cnblogs.com/sysuhanyf/p/7454530.html <keep-al...
    華華00526閱讀 1,464評論 0 2
  • keep-alive keep-alive是Vue提供的一個(gè)抽象組件,用來對組件進(jìn)行緩存,從而節(jié)省性能荠商,由于是一個(gè)...
    羊烊羴閱讀 232,735評論 7 103
  • 鏈接:http://www.reibang.com/p/4b55d312d297 keep-alivekeep-...
    劉越姐姐啊閱讀 632評論 1 1
  • 是Vue的內(nèi)置組件寂恬,能在組件切換過程中將狀態(tài)保留在內(nèi)存中,防止重復(fù)渲染DOM莱没。 包裹動(dòng)態(tài)組件時(shí)初肉,會緩存不活動(dòng)的組件...
    為君梳作半面妝閱讀 1,550評論 0 2
  • <keep-alive> 是 Vue 的內(nèi)置組件,能在組件切換過程中將狀態(tài)保留在內(nèi)存中饰躲,防止重復(fù)渲染DOM牙咏。 <k...
    前端新陽閱讀 6,484評論 0 1