91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么在vue中實現一個keep-alive緩存功能

發布時間:2021-04-14 18:08:02 來源:億速云 閱讀:137 作者:Leah 欄目:web開發

本篇文章為大家展示了怎么在vue中實現一個keep-alive緩存功能,內容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。

<keep-alive>是Vue的內置組件,能在組件切換過程中將狀態保留在內存中,防止重復渲染DOM。

<keep-alive> 包裹動態組件時,會緩存不活動的組件實例,而不是銷毀它們。和 <transition> 相似,<keep-alive> 是一個抽象組件:它自身不會渲染一個 DOM 元素,也不會出現在父組件鏈中。

prop:

  • include: 字符串或正則表達式。只有匹配的組件會被緩存。

  • exclude: 字符串或正則表達式。任何匹配的組件都不會被緩存。

Vue 實現組件信息的緩存

當我們在開發vue的項目過程中,避免不了在路由切換到其他的component再返回后該組件數據會重新加載,處理這種情況我們就需要用到keep-alive來緩存vue的組件信息,使其不再重新加載。

一、在app.vue里

<keep-alive>
 <router-view></router-view>
</keep-alive>

但是這種情況會對所有的組件進行緩存,不能達到單個組件緩存的效果。

那么我們給部分組件加上,實現方法如下:

在app.vue

<!--這里是需要keepalive的-->
<keep-alive>
 <router-view v-if="$route.meta.keepAlive"></router-view>
<keep-alive>
 
<!-- 這里不會被keepAlive -->
 
<router-view v-if="!$route.meta.keepAlive"></router-view>

二、 在路由的index.js頁面里

{
 path: '',
 name: '',
 component: '',
 meta: {keepAlive: true}  // 這個是需要keepalive的
},
{
 path: '',
 name: '',
 component: ,
 meta: {keepAlive: false} // 這是不會被keepalive的
}

這就實現了部分組件的緩存功能

如果緩存的組件想要清空數據或者執行初始化方法,在加載組件的時候調用activated鉤子函數,如下:

activated: function () {
 this.data = ‘'
}

上述內容就是怎么在vue中實現一個keep-alive緩存功能,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

米易县| 湘乡市| 灌南县| 宜宾市| 施秉县| 新蔡县| 海淀区| 天等县| 扎鲁特旗| 永宁县| 荔浦县| 义乌市| 宜州市| 焉耆| 胶南市| 金沙县| 阿瓦提县| 伽师县| 五河县| 瑞安市| 定南县| 尉氏县| 镇江市| 临泉县| 额尔古纳市| 时尚| 武定县| 太康县| 卢龙县| 东阿县| 卢湾区| 花莲县| 贵港市| 旅游| 田东县| 中阳县| 西林县| 奎屯市| 鄂托克前旗| 酒泉市| 台北县|