vue關(guān)于點(diǎn)擊詳情頁面keep-alive的緩存問題
點(diǎn)擊詳情頁面keep-alive的緩存問題
今天有個(gè)列表
點(diǎn)擊以后 進(jìn)入詳情 然后在返回，再點(diǎn)擊其他的列表數(shù)據(jù)，詳情頁面請(qǐng)求的還是上一次請(qǐng)求的id 除非刷新才會(huì)請(qǐng)求現(xiàn)在的.
這樣子對(duì)用戶體驗(yàn)感是非常不好滴,查了半天資料 發(fā)現(xiàn)了activated這個(gè)api
解決有些不需要被緩存的組件頁面 設(shè)置 activated 即可以再次進(jìn)行事件的響應(yīng)
vue中路由表單緩存（keep-alive）
vue 中從一個(gè)路由切換到另一個(gè)路由的時(shí)候，第一個(gè)路由可能有表單信息，但切換到第二個(gè)路由時(shí)，第一個(gè)路由里的組件會(huì)被銷毀，表單里填寫的 value 也會(huì)消失，keep-alive 就可以幫我們緩存我們不想被銷毀的組件。
頁面效果
父組件代碼
<!-- 如果沒有 include 屬性，那么就會(huì)緩存全部子路由組件，這樣做是沒有必要的，只緩存表單組件即可 --> <keep-alive include='News‘> <!-- 緩存多個(gè)組件的寫法 --> <!-- <keep-alive :include=['News','Massage']> --> <router-view></router-view> </keep-alive>
被緩存組件代碼
<template>
<ul>
<li>news001 <input type='text'></li>
<li>news002 <input type='text'></li>
<li>news003 <input type='text'></li>
</ul>
</template><script>
export default {
name: "News",
};
</script>那么問題來了，如果在緩存組件開一個(gè)定時(shí)器，那么切換到其他組件定時(shí)器永遠(yuǎn)不會(huì)被銷毀，這樣運(yùn)行效率會(huì)很低，那么這時(shí)候我們需要兩個(gè)新的生命周期函數(shù) activated 與 deactivated
<script>
export default {
name:'News',
data(){
return {
count:0,
}
},
activated(){
this.timer = setInterval(()=>{
this.count++
},20)
},
deactivated(){
clearInterval(this.timer)
}
}
</script>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
我們都知道,輪播圖組件模板結(jié)構(gòu)通常是ul包裹li的結(jié)構(gòu),在vue中,li的數(shù)量也通常是由后端接口返回的數(shù)據(jù)決定,下面這篇文章主要給大家介紹了關(guān)于vue3封裝輪播圖組件功能的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了用Cordova打包Vue項(xiàng)目的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
基于Vue3+Element Plus 實(shí)現(xiàn)多表單校驗(yàn)demo
表單校驗(yàn)在日常的開發(fā)需求中是一種很常見的需求,通常在提交表單發(fā)起請(qǐng)求前校驗(yàn)用戶輸入是否符合規(guī)則,通常只需formRef.value.validate()即可校驗(yàn),本文給大家介紹基于Vue3+Element Plus 實(shí)現(xiàn)多表單校驗(yàn)demo,感興趣的朋友一起看看吧2024-06-06
這篇文章主要介紹了vue自定義全局消息框組件問題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
Vue不能檢測(cè)到數(shù)據(jù)變化的幾種情況說明
這篇文章主要介紹了Vue不能檢測(cè)到數(shù)據(jù)變化的幾種情況說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue2使用cube-ui?實(shí)現(xiàn)搜索過濾、高亮功能
cube-ui?是基于?Vue.js?實(shí)現(xiàn)的精致移動(dòng)端組件庫(kù)，由于很長(zhǎng)一段時(shí)間沒有學(xué)習(xí)cube-ui?的功能實(shí)現(xiàn)示例代碼了，今天通過本文給大家介紹下Vue2使用cube-ui?實(shí)現(xiàn)搜索過濾、高亮功能，感興趣的朋友跟隨小編一起看看吧2023-01-01
這篇文章主要介紹了使用elementUI的表格table給列添加樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue使用vux-ui自定義表單驗(yàn)證遇到的問題及解決方法
這篇文章主要介紹了Vue使用vux-ui自定義表單驗(yàn)證遇到的問題及解決方法,需要的朋友可以參考下2018-05-05
本篇文章主要介紹了在Vue中使用Compass的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue生成二維碼QR?Code的簡(jiǎn)單實(shí)現(xiàn)方法示例
這篇文章主要為大家介紹了vue生成二維碼QR?Code的實(shí)現(xiàn)示例詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04