Vue-實現組件全局和局部緩存

前言

    在某些特定的場景中，咱們不須要每次進入頁面都去向後端發送對應的數據請求，這樣子會大大增長服務器的壓力，不是很友好。所以vue官方推出了keep-alive緩存組件標籤，但問題是被這個標籤包包裹的組件都將被所有緩存，這樣子就只能拿到第一次的數據，這也不是咱們想要的，name如何實現組件頁面的全局和局部緩存呢？請聽我一一道來

第一步

該文章以App.vue爲例

<keep-alive :include="keepArr">
    <router-view class="Routers"></router-view>
</keep-alive>
複製代碼

第二步

data() {
        return {
            keepArr: [
                "recommend",
            ]
        }
        
        
複製代碼

第三步

在recommend.vue中給組件name: 'recommend'

說明

• include是用來緩存給定組件的，有多個的狀況下要加上 ':'
• keepArr哄的直是表明要被緩存的組件頁面，若是不緩存就不寫入該數組中
• 凡是在keepArr數組中的組件都是來自於.vue文件中的惟一name值，建議每一個.vue文文件都設置name名稱做爲惟一

寫在最後

但願個人分享對你有所幫助，更多資訊請持續關注，我會分享愈來愈多的實戰經驗哦！ 或加入大前端知識體系社區一塊兒探索技術:608229520