欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue前端開發(fā)keepAlive使用詳解

 更新時間:2021年10月09日 16:50:17   作者:guoyp2126  
在開發(fā)中經(jīng)常有從列表跳到詳情頁,然后返回詳情頁的時候需要緩存列表頁的狀態(tài)(比如滾動位置信息),這個時候就需要保存狀態(tài),要緩存狀態(tài)

前言

keep-alive 是 Vue 的內(nèi)置組件,當它包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們。

在組件切換過程中將狀態(tài)保留在內(nèi)存中,防止重復(fù)渲染DOM,減少加載時間及性能消耗,提高用戶體驗性。使用方式為

<keep-alive>
    <component />
</keep-alive>

這里的component會被緩存。

keep-avlive鉤子函數(shù)

被包含在 keep-alive 中創(chuàng)建的組件,會多出兩個生命周期的鉤子: activated與deactivated。activated:在 keep-alive 組件激活時調(diào)用,keep-alive 會將數(shù)據(jù)保留在內(nèi)存中,如果要在每次進入頁面的時候獲取最新的數(shù)據(jù),需要在 activated 階段獲取數(shù)據(jù),承擔原來 created 鉤子函數(shù)中獲取數(shù)據(jù)的任務(wù)
deactivated:在 keep-alive 組件停用時調(diào)用,使用了keep-alive就不會調(diào)用beforeDestory和destoryed鉤子,因為組件沒有被銷毀,而是被緩存起來了,所以deactivated鉤子可以看做是beforeDestory和destoryed的替代,如清空localStorge數(shù)據(jù)等。

keep-avlive緩存哪些組件

keep-avlive緩存哪些組件通過兩種方式,一種是通過keep-avlive組件提供的include、exclude屬性通過參數(shù)進行匹配對應(yīng)的組件進行緩存,另一種通過route中meta屬性的設(shè)置。
使用include、exclude屬性完成緩存組件設(shè)置

/*將緩存 name 為 test 的組件*/
<keep-alive include='test'>
      <router-view/>
</keep-alive>

使用include是將緩存name為test的組件。

<keep-alive exclude="test"> 
  <router-view/>
</keep-alive>

使用exclude,將不緩存name為test的組件。
使用route中meta屬性的設(shè)置緩存組件,如

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: 'goods',
      children: [
        {
          path: 'goods',
          name: 'goods',
          component: Goods,
          meta: {
        	keepAlive: false // 不需要緩存
      	  }
        },
        {
          path: 'ratings',
          name: 'ratings',
          component: Ratings,
          meta: {
        	keepAlive: true  // 需要緩存
      	  }
        }
      ]
    }
  ]
})

goods組件需要緩存,ratings不需要緩存。在使用 到中使用以下語句動態(tài)完成組件緩存設(shè)置,設(shè)置代碼如下

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

示例

設(shè)置兩個組件KeepCom1,KeepCom2,KeepCom1設(shè)置緩存,KeepCom2不設(shè)置緩存。同時測試兩個鉤子函數(shù)的使用,這里使用路由meta實現(xiàn)緩存組件的設(shè)置。
KeepCom1代碼如下:

<template>
  <div class="wrapper">
    <ul class="content"></ul>
    <button class="add" id="add" @click="add">添加子元素</button>
  </div>
</template>
<script>
export default {
  name: 'keepCom1',
  methods: {
    add () {
      let ul = document.getElementsByClassName('content')[0]
      let li = document.createElement('li')
      li.innerHTML = '我是添加的元素'
      ul.appendChild(li)
    }
  },
  activated () {
    console.log('緩存activated執(zhí)行')
  },
  deactivated () {
    console.log('緩存deactivated執(zhí)行')
  }
}
</script>
<style>
</style>

KeepCom2代碼如下:

<template>
  <div class="wrapper">
    <ul class="content"></ul>
    <button class="add" id="add" @click="add">添加子元素</button>
  </div>
</template>

<script>
export default {
  name: 'keepCom2',
  methods: {
    add () {
      let ul = document.getElementsByClassName('content')[0]
      let li = document.createElement('li')
      li.innerHTML = '我是添加的元素'
      ul.appendChild(li)
    }
  },
  activated () {
    console.log('緩存activated執(zhí)行')
  },
  deactivated () {
    console.log('緩存deactivated執(zhí)行')
  }
}
</script>
<style>
</style>

KeepCom1和KeepCom2代碼基本一致,就是給頁面增加結(jié)點。
keepAvliveTest代碼如下

<template>
  <div align="center" style="margin-top: 20px;">
    <router-link to="/keepAvliveTest/keepcom1">使用緩存</router-link>
    <router-link to="/keepAvliveTest/keepcom2">不使用緩存</router-link>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
<script>
export default {
  name: 'keepAvliveTest'
}
</script>
<style>
</style>

完成keepcom1和keepcom2組件切換,執(zhí)行后的結(jié)果為

在這里插入圖片描述

keepcom1使用緩存,切換頁面時,上次添加三個元素還在,而且鉤子函數(shù)得到執(zhí)行。keepcom2沒有使用緩存,切換頁面時,上次添加一個元素不存在了,恢復(fù)到初始狀態(tài)。而且兩個鉤子沒有得到執(zhí)行。

小結(jié)及注意事項

在設(shè)置需要緩存的頁面時,推薦使用router中meta標簽,這樣代碼的耦合度較低。keep-alive 先匹配被包含組件的 name 字段,如果 name 不可用,則匹配當前組件 components 配置中的注冊名稱。包含在 keep-alive 中,但符合 exclude ,不會調(diào)用activated和 deactivated

以上就是vue前端開發(fā)keepAlive使用詳解的詳細內(nèi)容,更多關(guān)于vue前端的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • Vue實現(xiàn)回到頂部和底部動畫效果

    Vue實現(xiàn)回到頂部和底部動畫效果

    這篇文章主要為大家詳細介紹了Vue實現(xiàn)回到頂部和底部動畫效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-07-07
  • vue-seamless-scroll無縫滾動組件使用方法詳解

    vue-seamless-scroll無縫滾動組件使用方法詳解

    這篇文章主要為大家詳細介紹了vue-seamless-scroll無縫滾動組件的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue3中require報錯require is not defined問題及解決

    vue3中require報錯require is not defined問題及解決

    這篇文章主要介紹了vue3中require報錯require is not defined問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • vue3?element?plus按需引入最優(yōu)雅的用法實例

    vue3?element?plus按需引入最優(yōu)雅的用法實例

    這篇文章主要給大家介紹了關(guān)于vue3?element?plus按需引入最優(yōu)雅的用法,以及關(guān)于Element-plus按需引入的一些坑,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2022-03-03
  • Vue2.0使用過程常見的一些問題總結(jié)學習

    Vue2.0使用過程常見的一些問題總結(jié)學習

    本篇文章主要介紹了Vue2.0使用過程常見的一些問題總結(jié)學習,詳細的介紹了使用中會遇到的各種錯誤,有興趣的可以了解一下。
    2017-04-04
  • vue3中cookie的詳細使用過程

    vue3中cookie的詳細使用過程

    近期做的項目比較雜,涉及到前端框架的工作,遇到了許多問題,記錄一下這個比較棘手的問題,下面這篇文章主要給大家介紹了關(guān)于vue3中cookie的詳細使用方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-08-08
  • Vue詳細講解Vuex狀態(tài)管理的實現(xiàn)

    Vue詳細講解Vuex狀態(tài)管理的實現(xiàn)

    這篇文章主要介紹了Vuex狀態(tài)管理器的使用,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • vue中v-for循環(huán)給標簽屬性賦值的方法

    vue中v-for循環(huán)給標簽屬性賦值的方法

    這篇文章主要介紹了vue中v-for循環(huán)給標簽屬性賦值的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-10-10
  • vant組件中 dialog的確認按鈕的回調(diào)事件操作

    vant組件中 dialog的確認按鈕的回調(diào)事件操作

    這篇文章主要介紹了vant組件中 dialog的確認按鈕的回調(diào)事件操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • Vue技巧Element Table二次封裝實戰(zhàn)示例

    Vue技巧Element Table二次封裝實戰(zhàn)示例

    這篇文章主要為大家介紹了Vue技巧Element Table二次封裝實戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11

最新評論