vue keep-alive
<keep-alive>是Vue的內建元件,能在元件切換過程中將狀態保留在記憶體中,防止重複渲染DOM。
prop:
include: 字串或正規表示式。只有匹配的元件會被快取。
exclude: 字串或正規表示式。任何匹配的元件都不會被快取。
在2.1.0版本Vue中
常見用法:
// 元件
export default {
name: 'test-keep-alive',
data () {
return {
includedComponents: "test-keep-alive"
}
}
}
<keep-alive include="test-keep-alive">
<!-- 將快取name為test-keep-alive的元件 -->
<component></component>
</keep-alive>
<keep-alive include="a,b">
<!-- 將快取name為a或者b的元件,結合動態元件使用 -->
<component :is="view"></component>
</keep-alive>
<!-- 使用正規表示式,需使用v-bind -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 動態判斷 -->
<keep-alive :include="includedComponents">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="test-keep-alive">
<!-- 將不快取name為test-keep-alive的元件 -->
<component></component>
</keep-alive>
結合router,快取部分頁面
使用$route.meta的keepAlive屬性:
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
需要在router中設定router的元資訊meta:
//...router.js
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要快取
}
},
{
path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true // 需要被快取
}
}
]
})
使用效果
以上面router的程式碼為例:
<!-- Page1頁面 -->
<template>
<div class="hello">
<h1>Vue</h1>
<h2>{{msg}}</h2>
<input placeholder="輸入框"></input>
</div>
</template>
<!-- Hello頁面 -->
<template>
<div class="hello">
<h1>{{msg}}</h1>
</div>
</template>
(1) 在Page1頁面輸入框輸入“asd”,然後手動跳轉到Hello頁面;
(2) 回到Page1頁面發現之前輸入的"asd"依然保留,說明頁面資訊成功儲存在記憶體中;
圖3 返回Page1頁面,輸入框資料會被保留
當然,也可以通過動態設定route.meta的keepAlive屬性來實現其他需求,
借鑑一下 vue-router 之 keep-alive,作者:RoamIn這篇部落格中的例子:
- 首頁是A頁面
- B頁面跳轉到A,A頁面需要快取
- C頁面跳轉到A,A頁面不需要被快取
思路是在每個路由的beforeRouteLeave(to, from, next)
鉤子中設定to.meta.keepAlive
:
A的路由:
{
path: '/',
name: 'A',
component: A,
meta: {
keepAlive: true // 需要被快取
}
}
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 設定下一個路由的 meta
to.meta.keepAlive = true; // B 跳轉到 A 時,讓 A 快取,即不重新整理
next();
}
};
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 設定下一個路由的 meta
to.meta.keepAlive = false; // C 跳轉到 A 時讓 A 不快取,即重新整理
next();
}
};
keep-alive生命週期鉤子函式:activated、deactivated
使用<keep-alive>會將資料保留在記憶體中,如果要在每次進入頁面的時候獲取最新的資料,需要在activated階段獲取資料,承擔原來created鉤子中獲取資料的任務。
此文章轉載於:https://www.cnblogs.com/sysuhanyf/p/7454530.html
相關文章
- vue <keep-alive>VueKeep-Alive
- Vue中keep-alive元件的理解VueKeep-Alive元件
- vue的keep-alive中使用EventBusVueKeep-Alive
- Vue keep-alive實踐總結VueKeep-Alive
- Vue 頁面快取keep-aliveVue快取Keep-Alive
- VUE快取:動態keep-aliveVue快取Keep-Alive
- Vue 3 路由元件快取keep-aliveVue路由元件快取Keep-Alive
- 實現vue 的keep-alive快取功能VueKeep-Alive快取
- vue2的keep-alive的總結VueKeep-Alive
- React 怎麼實現 Vue 的 <keep-alive> 元件ReactVueKeep-Alive元件
- Vue中keep-alive的深入理解和使用VueKeep-Alive
- vue的另一個內建元件keep-aliveVue元件Keep-Alive
- vue中動態化的按需使用keep-aliveVueKeep-Alive
- vue中keep-alive保持使用過的狀態VueKeep-Alive
- 在移動端使用vue-router和keep-aliveVueKeep-Alive
- Vue 全站快取之 keep-alive : 動態移除快取Vue快取Keep-Alive
- http keep-alive與tcp keep-aliveHTTPKeep-AliveTCP
- Vue原始碼解析,keep-alive是如何實現快取的?Vue原始碼Keep-Alive快取
- 「Vue原始碼學習」簡單講一講keep-alive的原理吧Vue原始碼Keep-Alive
- keep-alive元件使用Keep-Alive元件
- 關於 Http 協議中的 keep-alive 與 Tcp keep-aliveHTTP協議Keep-AliveTCP
- Vue3 除了 keep-alive,還有哪些頁面快取的實現方案VueKeep-Alive快取
- node http keep-alive demoHTTPKeep-Alive
- Vue的鉤子函式[路由導航守衛、keep-alive、生命週期鉤子]Vue函式路由Keep-Alive
- vue使用keep-alive實現多元件巢狀中個別元件存活不銷燬VueKeep-Alive元件巢狀
- keep-alive:元件級快取Keep-Alive元件快取
- 客戶端禁用Keep-alive, 服務端開啟Keep-alive,會怎麼樣?客戶端Keep-Alive服務端
- vue專案中keep-alive的使用,從詳情頁返回列表時儲存瀏覽位置VueKeep-Alive
- 徹底揭祕keep-alive原理Keep-Alive
- vue專案中keep-alive快取,從詳情頁返回列表時儲存上一步的資訊VueKeep-Alive快取
- 關於 HTTP 協議中的 keep-aliveHTTP協議Keep-Alive
- 聊聊keep-alive元件的使用及其實現原理Keep-Alive元件
- Jmeter的客戶端實現與Keep-AliveJMeter客戶端Keep-Alive
- nginx 伺服器是否要關閉keep-aliveNginx伺服器Keep-Alive
- 👾 筆記 | Angular 實現 keep-alive (路由複用)筆記AngularKeep-Alive路由
- 前端進階演算法3:從瀏覽器快取淘汰策略和Vue的keep-alive學習LRU演算法前端演算法瀏覽器快取VueKeep-Alive
- vue單頁應用中 返回列表記住上次滾動位置、keep-alive快取之後更新列表資料 那點事VueKeep-Alive快取
- 透過Keep-Alive實現防抖&節流元件Keep-Alive元件