vue keep-alive

keep-alive
有時候我們不希望組件被重新渲染影響使用體驗;或者處于性能考慮,避免多次重復渲染降低性能。而是希望組件可以緩存下來,維持當前的狀態。

    <!-- 加載路由時將數據保存到內存里,下次不需要再加載 -->
    <keep-alive exclude="Detail">
      <router-view/>
    </keep-alive>
圖片.png

keep-alive的生命周期

  • 初次進入時:created > mounted > activated;退出后觸發 deactivated
  • 再次進入:會觸發 activated;事件掛載的方法等,只執行一次的放在 mounted 中;組件每次進去執行的方法放在 activated 中

實例:


監聽頁面滾動
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • keep-alive keep-alive是Vue提供的一個抽象組件,用來對組件進行緩存,從而節省性能,由于是一個...
    追尋1989閱讀 230評論 0 0
  • 有時候我們不希望組件被重新渲染影響使用體驗;或者處于性能考慮,避免多次重復渲染降低性能。而是希望組件可以緩存下來,...
    solfKwolf閱讀 208評論 0 0
  • 鏈接:http://www.lxweimin.com/p/4b55d312d297 keep-alivekeep-...
    劉越姐姐啊閱讀 637評論 1 1
  • keep-alive keep-alive是Vue提供的一個抽象組件,用來對組件進行緩存,從而節省性能,由于是一個...
    羊烊羴閱讀 232,775評論 7 103
  • keep-alive keep-alive是Vue提供的一個抽象組件,用來對組件進行緩存,從而節省性能,由于是一個...
    world_7735閱讀 358評論 2 4