1. 使用vue框架開發,版本更新,怎麼解決用戶瀏覽器緩存問題
vue-cli里的默認配置,css和js的名字都加了哈希值,所以新版本css、js和就舊版本的名字是不同的,不會有緩存問題。
不過值得注意的是,把打包好的index.html放到伺服器里去的時候,index.html在伺服器端可能是有緩存的,這需要在伺服器配置不讓緩存index.html。
2. vue 緩存組件keep-alive
kee-alive 是 Vue 內置的一個組件, 可以使被包含的組件保留狀態,或避免重新渲染 。也就是所謂的組件緩存
keep-alive是一個抽象的組件,緩存的組件不會被mounted,為此提供activated和deactivated鉤子函數
在2.1.0 版本後keep-alive新加入了兩個屬性: include(包含的組件緩存生效) 與 exclude(排除的組件不緩存,優先順序大於include) 。
keep-alive可以接收3個屬性做為參數進行匹配對應的組件進行緩存:
include 包含的組件(可以為字元串,數組,以及正則表達式,只有匹配的組件會被緩存)
exclude 排除的組件(以為字元串,數組,以及正則表達式,任何匹配的組件都不會被緩存)
max 緩存組件的最大值(類型為字元或者數字,可以控制緩存組件的個數)
配合router使用
1.keep-alive 先匹配被包含組件的 name 欄位,如果 name 不可用,則匹配當前組件 components 配置中的注冊名稱。
2.keep-alive 不會在函數式組件中正常工作,因為它們沒有緩存實例。
3.當匹配條件同時在 include 與 exclude 存在時,以 exclude 優先順序最高(當前vue 2.4.2 version)。比如:包含於排除同時匹配到了組件A,那組件A不會被緩存。
4.包含在 keep-alive 中,但符合 exclude ,不會調用activated和 deactivated。
參考 https://juejin.cn/post/6844903918313406472
參考 https://www.imooc.com/article/302879
3. vue.js 系統每次發布新版本,必須清理瀏覽器緩存怎麼解決
這樣的情況個人建議用360安全衛士電腦清理功能清理瀏覽器緩沖,然後重新打開就可以正常。
4. Vue 怎麼緩存當前的組件緩存後怎麼更新說說你對keep-alive的理解是什麼
keep-alive 是 vue 中的內置組件,能在組件切換過程中將狀態保留在內存中,防止重復渲染 DOM
keep-alive 包裹動態組件時,會緩存不活動的組件實例,而不是銷毀它們
keep-alive 可以設置以下 props 屬性:
關於 keep-alive 的基本用法:
使用 includes 和 exclude :
匹配首先檢查組件自身的 name 選項,如果 name 選項不可用,則匹配它的局部注冊名稱 (父組件 components 選項的鍵值),匿名組件不能被匹配
設置了 keep-alive 緩存的組件,會多出兩個生命周期鉤子( activated 與 deactivated ):
使用原則:當我們在某些場景下不需要讓頁面重新載入時我們可以使用 keepalive
舉個栗子:
當我們從 首頁 –> 列表頁 –> 商詳頁 –> 再返回 ,這時候列表頁應該是需要 keep-alive
從 首頁 –> 列表頁 –> 商詳頁 –> 返回到列表頁(需要緩存) –> 返回到首頁(需要緩存) –> 再次進入列表頁(不需要緩存) ,這時候可以按需來控制頁面的 keep-alive
在路由中設置 keepAlive 屬性判斷是否需要緩存
使用 <keep-alive>
keep-alive 是 vue 中內置的一個組件
源碼位置:src/core/components/keep-alive.js
可以看到該組件沒有 template ,而是用了 render ,在組件渲染的時候會自動執行 render 函數
this.cache 是一個對象,用來存儲需要緩存的組件,它將以如下形式存儲:
在組件銷毀的時候執行 pruneCacheEntry 函數
在 mounted 鉤子函數中觀測 include 和 exclude 的變化,如下:
如果 include 或 exclude 發生了變化,即表示定義需要緩存的組件的規則或者不需要緩存的組件的規則發生了變化,那麼就執行 pruneCache 函數,函數如下:
在該函數內對 this.cache 對象進行遍歷,取出每一項的 name 值,用其與新的緩存規則進行匹配,如果匹配不上,則表示在新的緩存規則下該組件已經不需要被緩存,則調用 pruneCacheEntry 函數將其從 this.cache 對象剔除即可
關於 keep-alive 的最強大緩存功能是在 render 函數中實現
首先獲取組件的 key 值:
拿到 key 值後去 this.cache 對象中去尋找是否有該值,如果有則表示該組件有緩存,即命中緩存,如下:
直接從緩存中拿 vnode 的組件實例,此時重新調整該組件 key 的順序,將其從原來的地方刪掉並重新放在 this.keys 中最後一個
this.cache 對象中沒有該 key 值的情況,如下:
表明該組件還沒有被緩存過,則以該組件的 key 為鍵,組件 vnode 為值,將其存入 this.cache 中,並且把 key 存入 this.keys 中
此時再判斷 this.keys 中緩存組件的數量是否超過了設置的最大緩存數量值 this.max ,如果超過了,則把第一個緩存組件刪掉
解決方案可以有以下兩種:
每次組件渲染的時候,都會執行 beforeRouteEnter
在 keep-alive 緩存的組件被激活的時候,都會執行 actived 鉤子
注意:伺服器端渲染期間 avtived 不被調用
5. vue頁面緩存(keepAlive)
同人博客搬遷~~~~(播客主頁: https://www.cnblogs.com/epines/ )
頁面緩存在頁面中長期會使用到,可以更快速的在頁面切換期間的資源獲取
主要是用keep-alive實現
在vue項目中,相關的寫法比較多,還有一些注意點需要仔細
第一種方式
在App.vue中
添加標簽
<keep-alive>
<router-view />
</keep-alive>
這會就是所有的頁面都會被緩存
這里做了兩個頁面的相互跳轉,分別寫了一個輸入框,在輸入內容後,跳轉時,輸入的內容因為緩存的原因會被保留
如果存在某些頁面需要緩存,那麼可以通過keep-alive的屬性去處理
其中就是include和exclude
include:名稱匹配的組件才會被緩存,其中可以寫字元串或正則表達式
exclude:名稱匹配的組件不會被緩存,其中同樣是字元串或正則表達式
這里的名稱是指組件的名稱
<script>
export default {
name: 'HelloWorld'
}
</script>
第二種方式:
在路由中進行設置通過添加meta,route/index.js
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta: {
keepAlive: true // 該路由會被緩存
}
},
{
path: '/ss',
name: 'ss',
component: Ss,
meta: { keepAlive:false // 該路由不會被緩存,不需要緩存的時候該屬性可以不用寫 }
}]
})
這時候頁面還需要通過該屬性進行判斷是否緩存
在App.vue
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
</router-view>
這樣寫有個優點就是,需要緩存不需要緩存的name可以隨便寫,不需要做什麼規律性的去寫出一個合適的正則去匹配上,就會更加靈活些
常見的應用場景可以是,列表到詳情頁,從詳情頁返回到列表頁,如果說列表頁沒有做緩存,在單頁面下,會直接返回列表首頁(存在分頁的情況),就不能直接返回至之前離開的列表頁,所以這個地方在列表頁添加頁面緩存後,可以做到返回至之前離開的列表頁
沒有緩存的時候,返回列表:
有緩存的時候,返回列表
所以從某些程度上來講,即增加了頁面的響應速度,又增加了用戶體驗,總體來說,還是比較實用的
6. vue js版本更新,但用戶的瀏覽器有緩存之前的vue文件
你的vuejs版本更新難道是直接覆蓋伺服器文件,而不是
/vue/2.5.13/vue.js
/vue/2.5.12/vue.js
這樣分版本存放?趕緊改吧