vue中的keep-alive緩存

在開發vue項目時注册送28体验金的游戏平台,我們經常需要在各個組件之間進行切換,當我們在A組件中寫了一些內容,或者保存了一些狀態的時候,切換到其他組件,A組件的內容就消失了,這是什么原因呢?

我們在A組件的生命周期created中打印一下:

created(){
    // eslint-disable-next-line no-console
    console.log("組件重新渲染了");
  },

然后我們在瀏覽器中來回切換幾次組件,查看一下控制臺:


可以看出,每一次進行組件切換的時候,組件都會進行重新渲染,所以里面的內容也會跟著消失,那么我們就會用到keep-alive來解決這個問題。

keep的幾種使用方式

1.自定義想要緩存的組件

首先在App.vue中添加代碼:

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
    <router-view v-if="!$route.meta.keepAlive"/>

這一段代碼的意思是:
當正在跳轉的組件的$route.meta.keepAlive為true時,就將該組件加入緩存,否則不加入緩存。

然后在路由中找到我們需要進行緩存的組件,設置meta.keepAlive的值為true

path: '/',
    name: 'Home',
    component: Home,
    meta: {
        keepAlive: true
    }

此時當我們在home組件表單中輸入123,然后點擊跳轉到其他組件再回來的時候,我們發現123仍然存在,生命周期也不會再重新打印了。

我們還可以直接在路由守衛中進行keepAlive值的設置:

beforeRouteLeave(to,from,next){
    to.meta.keepAlive = true;
    next();
  }

2.結合動態組件<component>使用

<template>
  <div class="home">
  <keep-alive>
    <component v-if="iview" :is="view1"/>
    <component v-if="!iview" :is="view2"/>
  </keep-alive>
  <button @click="iview = !iview">切換子組件</button>
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
import WorldHello from '@/components/WorldHello.vue'
export default {
  name: 'Home',
  components: {
    HelloWorld,WorldHello
  },
  data(){
    return{
      iview:true,
      view1:HelloWorld,
      view2:WorldHello
    }
  }
}
</script>

這樣我們在HelloWorld和WorldHello這兩個組件之間進行切換時候,兩個組件都會被緩存了。

注意:動態組件中才可以使用,靜態組件是不可以使用的,例如下面這種:

<keep-alive>
    <component is="view1"/>
</keep-alive>
原文鏈接:

上一篇:一篇就夠·通關Event Loop執行順序
下一篇:react 高階組件 HOC 的個人理解和使用場景(易懂)

相關推薦

  • (小白篇)vue-cli3.0創建項目+引入element-ui

    vuecli在2018年8月份發布了3.0版本,經過重構之后,可以說是一個船心版本! 在項目都落地之后,就想升級一下cli版本,嘗一嘗3.0帶來的舒適,也是為后面項目的開展做一個準備。

    1 年前
  • (小小黑科技)vue+echarts實現半圓圖表

    如何用echarts實現半圓圖表?在echarts官方實例倒騰一波,發現官方并沒有提供半圓圖表的寫法,那怎么辦呢?官方沒提供,但需求還是要實現的。 半圓圖表其實就是餅圖的一半,那么簡單的思路如下:設...

    1 年前
  • (vue框架)為element組件賦初始值以后無法更改值得問題

    情況描述:組件未加載時已有初始值,mounted里面加載數據,賦值,渲染以后,組件無法更改內容 data里面已經有這個表單對象的初始值但還是無法修改,之前有過一次,沒有給表單綁定對象,所以賦值以后無法...

    9 個月前
  • (vuejs學習)2、使用ElementUI(*)

    1.element安裝 開發環境是win10,一到node官網下載node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    8 個月前
  • (vuejs學習)1、Vue初上手(*)

    參考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    8 個月前
  • 鼠標移入移出效果 -- jQuery/Vue版

    元素內遮罩層根據鼠標方向顯示的效果比較常見,比如百度圖片里的圖片信息展示。自己動手實現jQuery插件版和Vue組件版效果。 原文鏈接(http://www.bestvist.com/p/56) ...

    2 年前
  • 麻雀雖小五臟俱全的Vue拉勾項目,看看應該有幫助

    全棧系列Vue版拉勾,客官們來瞧瞧 模擬拉勾app系列vue前端界面 github地址,來猛戳吧(https://github.com/qianbin01/lagouvue) 前言 本項目...

    1 年前
  • 高性能網站搭建-前端性能優化 (附Vue首屏加載時間優化詳細方案)

    前言 事實上, 只有的最終用戶響應時間是發在從Web服務器獲取HTML文檔并傳送到瀏覽器中的。如果希望能夠有效地減少頁面的響應時間,就必須關注剩余的最終用戶體驗。

    10 個月前
  • 騷操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 筆者最近在學習使用注册送28体验金的游戏平台,提到react就繞不過去。redux是一個狀態管理架構,被廣泛用于rea...

    2 年前
  • 馬蜂窩推薦系統容災緩存服務的設計與實現

    數據庫突然斷開連接、第三方接口遲遲不返回結果、高峰期網絡發生抖動...... 當程序突發異常時,我們的應用可以告訴調用方或者用戶「對不起,服務器出了點問題」;或者找到更好的方式,達到提升用戶體驗的目的...

    10 個月前

官方社區

掃碼加入 JavaScript 社區