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