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

vue使用keep-alive實(shí)現(xiàn)數(shù)據(jù)緩存不刷新

 更新時(shí)間:2017年10月21日 15:33:47   作者:我是帥帥的玉米  
這篇文章主要介紹了vue使用keep-alive實(shí)現(xiàn)數(shù)據(jù)緩存不刷新,這里整理了詳細(xì)的代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

到現(xiàn)在,接觸vue也小段時(shí)間了,項(xiàng)目進(jìn)行到了一定程度,然而項(xiàng)目缺少了緩存機(jī)制,所以每次跳轉(zhuǎn)頁(yè)面都會(huì)重新created一下數(shù)據(jù),雖說(shuō)系統(tǒng)的數(shù)據(jù)請(qǐng)求速度很快,但是這樣做對(duì)系統(tǒng)的性能會(huì)有很大的壞處的,所以到這里就要對(duì)系統(tǒng)優(yōu)化下,添加緩存了。

其實(shí)到現(xiàn)在,對(duì)于vue還是沒(méi)有玩通,每深挖一次,就會(huì)發(fā)現(xiàn)一次vue的精彩,開始不清楚要用什么實(shí)現(xiàn)緩存,找了好久,有好幾種說(shuō)法,就是用vuex、vuet或者keep-alive,然后對(duì)比了一下,在我認(rèn)為,vuex和vuet是實(shí)現(xiàn)狀態(tài)管理,重心是在數(shù)據(jù)處理上;想要實(shí)現(xiàn)整體的緩存,阻止created的刷新,就要用keep-alive。

所以這里我想要給大家介紹下如何用keep-alive實(shí)現(xiàn)緩存的頁(yè)面?其實(shí)很簡(jiǎn)單,就是幾句話而已。

1、keep-alive要配合router-view使用,這里要注意一點(diǎn)就是,keep-alive本身是vue2.0的功能,并不是vue-router的,所以再vue1.0版本是不支持的。keep-alive官方文檔點(diǎn)這里,代碼實(shí)現(xiàn)如下,router-view是在入口APP.vue里面

<template>
 <div id="app">

  <keep-alive>
   <router-view></router-view>
  </keep-alive>
  
  <!--這里是其他的代碼-->
 </div>
</template>

2、這樣就會(huì)實(shí)現(xiàn)組件的緩存,但是有個(gè)缺點(diǎn)就是所有組件都會(huì)被緩存,可是現(xiàn)實(shí)中就是我們有些頁(yè)面還是要及時(shí)刷新的,比如列表數(shù)據(jù),想要查看詳情的時(shí)候都是共用一個(gè)組件,只是刷新頁(yè)面,所以這個(gè)共用的組件是不能夠緩存的,不然會(huì)造成點(diǎn)其他的條目都是之前緩存的數(shù)據(jù)。那要怎么自定義呢,那就要在router-view里面多加個(gè)v-if判斷了,然后在router定義的文件里面在想要緩存的頁(yè)面多加上“meta:{keepAlive:true}”,不想要緩存就是“meta:{keepAlive:false}”或者不寫,只有為true的時(shí)候是會(huì)被keep-alive識(shí)別然后緩存的。

<template>
 <div id="app">
  <!--緩存想要緩存的頁(yè)面,實(shí)現(xiàn)后退不刷新-->
  <!--加上v-if的判斷,可以自定義想要緩存的組件,自定義在router里面-->
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
  
  <!--這里是其他的代碼-->
 </div>
</template>

3、在router文件加上meta判斷

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
  {//home會(huì)被緩存
    path:"/home",
    component:home,
    meta:{keepAlive: true}
  }
  {//hello不會(huì)被緩存
    path:"/hello",
    component:hello,
    meta:{keepAlive: false}
  }
})

想要看有沒(méi)有緩存成功,可以在各個(gè)組件的created鉤子里面打印輸出標(biāo)志,緩存成功就是首次進(jìn)入頁(yè)面,created會(huì)請(qǐng)求數(shù)據(jù),后面就不會(huì)再次請(qǐng)求而是直接調(diào)用緩存的

添加了緩存可以大大減少對(duì)系統(tǒng)性能的損壞,畢竟做數(shù)據(jù)處理型的系統(tǒng),數(shù)據(jù)過(guò)于龐大,每次都要請(qǐng)求一下頁(yè)面是很不好的,有了緩存,該緩存的緩存,不想緩存也可以實(shí)時(shí)刷新

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue 實(shí)現(xiàn)撥打電話操作

    Vue 實(shí)現(xiàn)撥打電話操作

    這篇文章主要介紹了Vue 實(shí)現(xiàn)撥打電話操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11
  • vuepress打包部署踩坑及解決

    vuepress打包部署踩坑及解決

    這篇文章主要介紹了vuepress打包部署踩坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue3實(shí)現(xiàn)優(yōu)雅加載圖片的動(dòng)畫效果

    Vue3實(shí)現(xiàn)優(yōu)雅加載圖片的動(dòng)畫效果

    這篇文章主要為大家詳細(xì)介紹了Vue3如何實(shí)現(xiàn)加載圖片時(shí)添加一些動(dòng)畫效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下
    2023-10-10
  • vue封裝全局彈窗警告組件this.$message.success問(wèn)題

    vue封裝全局彈窗警告組件this.$message.success問(wèn)題

    這篇文章主要介紹了vue封裝全局彈窗警告組件this.$message.success問(wèn)題,具有很的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-09-09
  • element多級(jí)菜單動(dòng)態(tài)顯示的實(shí)現(xiàn)

    element多級(jí)菜單動(dòng)態(tài)顯示的實(shí)現(xiàn)

    通常在后臺(tái)管理系統(tǒng)中,需要根據(jù)每個(gè)用戶不同的權(quán)限來(lái)動(dòng)態(tài)展示菜單,本文主要介紹了element多級(jí)菜單動(dòng)態(tài)顯示的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-11-11
  • vue使用mixins優(yōu)化組件

    vue使用mixins優(yōu)化組件

    這篇文章主要介紹了vue如何使用mixins優(yōu)化組件,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下
    2021-04-04
  • Vue組件間通信的實(shí)現(xiàn)方法講解

    Vue組件間通信的實(shí)現(xiàn)方法講解

    組件是vue.js最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互進(jìn)行直接的引用,所以組件間的相互通信是非常重要的
    2023-01-01
  • Vue條件循環(huán)判斷+計(jì)算屬性+綁定樣式v-bind的實(shí)例

    Vue條件循環(huán)判斷+計(jì)算屬性+綁定樣式v-bind的實(shí)例

    今天小編就為大家分享一篇Vue條件循環(huán)判斷+計(jì)算屬性+綁定樣式v-bind的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • Vue自定義多選組件使用詳解

    Vue自定義多選組件使用詳解

    這篇文章主要為大家詳細(xì)介紹了Vue自定義多選組件的使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • 淺析VUE防抖與節(jié)流

    淺析VUE防抖與節(jié)流

    這篇文章主要介紹了淺析VUE防抖與節(jié)流的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)vue框架,感興趣的朋友可以了解下
    2020-11-11

最新評(píng)論