vue2中的keep-alive使用總結(jié)及注意事項
更新時間：2022年08月24日 09:11:08 作者：龍恩0707
vue2.0提供了一個keep-alive組件用來緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗。本文給大家介紹vue2中的keep-alive使用總結(jié)及注意事項，需要的朋友參考下吧
keep-alive 是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。結(jié)合vue-router中使用，可以緩存某個view的整個內(nèi)容。
基本使用如下：
<keep-alive> <component> <!-- 該組件將被緩存！ --> </component> </keep-alive>
一般有這樣的需求，當(dāng)我們第一次進(jìn)入列表頁需要請求一下數(shù)據(jù)，當(dāng)我從列表頁進(jìn)入詳情頁，詳情頁不緩存也需要請求下數(shù)據(jù)，然后返回列表頁
有兩個情況：
1. 直接點擊瀏覽器的后退返回按鈕。
2. 點擊導(dǎo)航欄中的 /list的鏈接返回。
那么針對第一種情況下，我們直接通過后退按鈕時，返回到列表頁(/list) 是不需要請求數(shù)據(jù)。
針對第二種情況下，我們通過鏈接返回到列表頁是需要請求數(shù)據(jù)。
所以這邊有三種情況：
1. 默認(rèn)進(jìn)來列表頁需要請求數(shù)據(jù)。
2. 進(jìn)入詳情頁后，通過瀏覽器默認(rèn)后退按鈕返回，是不需要ajax的請求的。
3. 進(jìn)入詳情頁后，通過點擊鏈接返回到列表頁后，也是需要發(fā)ajax請求的。
配置如下：
1. 入口文件 app.vue 的配置如下：
<!-- 緩存所有的頁面 --> <keep-alive> <router-view v-if="$route.meta.keep_alive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keep_alive"></router-view>
2. 在router中設(shè)置meta屬性，設(shè)置 keepAlive: true 表示需要使用緩存，false的話表示不需要使用緩存。且添加滾動行為 scrollBehavior
router/index.js 的配置如下：
import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';
Vue.use(Router);
const router = new Router({
mode: 'history', // 訪問路徑不帶井號 需要使用 history模式，才能使用 scrollBehavior
base: '/page/app', // 配置單頁應(yīng)用的基路徑
routes: [
{
path: '/',
name: 'list',
component: resolve => require(['@/views/list'], resolve), // 使用懶加載
meta: {
keepAlive: true // true 表示需要使用緩存
}
},
{
path: '/list',
name: 'list',
component: resolve => require(['@/views/list'], resolve), // 使用懶加載
meta: {
keepAlive: true // true 表示需要使用緩存 false表示不需要被緩存
}
},
{
path: '/detail',
name: 'detail',
component: resolve => require(['@/views/detail'], resolve) // 使用懶加載
}
],
scrollBehavior (to, from, savedPosition) {
// 保存到 meta 中，備用
to.meta.savedPosition = savedPosition;
if (savedPosition) {
return { x: 0, y: 0 };
}
return {};
}
});
export default router;3. list.vue 代碼如下：
<template>
<div class="hello">
<h1>vue</h1>
<h2>{{msg}}</h2>
<router-link to="/detail">跳轉(zhuǎn)到detail頁</router-link>
</div>
</template>
<script>
export default {
name: 'helloworld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
};
},
methods: {
ajaxRequest() {
const obj = {
'aa': 1
};
Promise.all([this.$store.dispatch('testUrl', obj)]).then((res) => {
console.log(res);
});
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
/*
如果 to.meta.savedPosition === undefined 說明是刷新頁面或可以叫第一次進(jìn)入頁面 需要刷新數(shù)據(jù)
如果savedPosition === null, 那么說明是點擊了導(dǎo)航鏈接;
此時需要刷新數(shù)據(jù)，獲取新的列表內(nèi)容。
否則的話 什么都不做，直接使用 keep-alive中的緩存
*/
if (to.meta.savedPosition === undefined) {
vm.ajaxRequest();
}
if (to.meta.savedPosition === null) {
vm.ajaxRequest();
}
})
}
};
</script>4. detail.vue 代碼如下：
<template>
<div class="list">
<h1>{{msg}}</h1>
<router-link to="/list">返回列表頁</router-link>
</div>
</template>
<script>
export default {
name: 'list',
data () {
return {
msg: 'Welcome to Your Vue.js App'
};
},
created() {
this.ajaxRequest();
},
methods: {
ajaxRequest() {
const obj = {
'aa': 1
};
Promise.all([this.$store.dispatch('withdary', obj)]).then((res) => {
console.log(res);
});
}
}
};
</script>二：使用router.meta 擴(kuò)展
假設(shè)現(xiàn)在有3個頁面，需求如下：
1. 默認(rèn)有A頁面，A頁面進(jìn)來需要一個請求。
2. B頁面跳轉(zhuǎn)到A頁面，A頁面不需要重新請求。
3. C頁面跳轉(zhuǎn)到A頁面，A頁面需要重新請求。
實現(xiàn)方式如下：
在 A 路由里面設(shè)置 meta 屬性：
{
path: '/a',
name: 'A',
component: resolve => require(['@/views/a'], resolve),
meta: {
keepAlive: true // true 表示需要使用緩存
}
}所以router/index下的所有代碼變?yōu)槿缦拢?/p>
import Vue from 'vue'; import Router from 'vue-router'; // import HelloWorld from '@/views/HelloWorld';
Vue.use(Router);
const router = new Router({
mode: 'history', // 訪問路徑不帶井號 需要使用 history模式，才能使用 scrollBehavior
base: '/page/app', // 配置單頁應(yīng)用的基路徑
routes: [
{
path: '/',
name: 'list',
component: resolve => require(['@/views/list'], resolve), // 使用懶加載
meta: {
keepAlive: true // true 表示需要使用緩存
}
},
{
path: '/list',
name: 'list',
component: resolve => require(['@/views/list'], resolve), // 使用懶加載
meta: {
keepAlive: true // true 表示需要使用緩存 false表示不需要被緩存
}
},
{
path: '/detail',
name: 'detail',
component: resolve => require(['@/views/detail'], resolve) // 使用懶加載
},
{
path: '/a',
name: 'A',
component: resolve => require(['@/views/a'], resolve),
meta: {
keepAlive: true // true 表示需要使用緩存
}
},
{
path: '/b',
name: 'B',
component: resolve => require(['@/views/b'], resolve)
},
{
path: '/c',
name: 'C',
component: resolve => require(['@/views/c'], resolve)
}
],
scrollBehavior (to, from, savedPosition) {
// 保存到 meta 中，備用
to.meta.savedPosition = savedPosition;
if (savedPosition) {
return { x: 0, y: 0 };
}
return {};
}
});
export default router;在 B 組件里面設(shè)置 beforeRouteLeave
beforeRouteLeave(to, from, next) {
// 設(shè)置下一個路由meta
to.meta.keepAlive = true; // 讓A緩存，不請求數(shù)據(jù)
next(); // 跳轉(zhuǎn)到A頁面
}B組件所有代碼如下：
<template>
<div class="list">
<h1>{{msg}}</h1>
<router-link to="/a">返回a頁面</router-link>
</div>
</template>
<script>
export default {
name: 'list',
data () {
return {
msg: 'Welcome to B Page'
};
},
created() {},
methods: {
},
beforeRouteLeave(to, from, next) {
// 設(shè)置下一個路由meta
to.meta.keepAlive = true; // 讓A緩存，不請求數(shù)據(jù)
next(); // 跳轉(zhuǎn)到A頁面
}
};
</script>在 C 組件里面設(shè)置 beforeRouteLeave：
beforeRouteLeave(to, from, next) {
// 設(shè)置下一個路由meta
to.meta.keepAlive = false; // 讓A不緩存，重新請求數(shù)據(jù)
console.log(to)
next(); // 跳轉(zhuǎn)到A頁面
}c組件所有代碼如下：
<template>
<div class="list">
<h1>{{msg}}</h1>
<router-link to="/a">返回a頁面</router-link>
</div>
</template>
<script>
export default {
name: 'list',
data () {
return {
msg: 'Welcome to B Page'
};
},
created() {},
methods: {
},
beforeRouteLeave(to, from, next) {
// 設(shè)置下一個路由meta
to.meta.keepAlive = false; // 讓A不緩存，重新請求數(shù)據(jù)
console.log(to)
next(); // 跳轉(zhuǎn)到A頁面
}
};
</script>a組件內(nèi)的所有的代碼如下：
<template>
<div class="hello">
<h1>vue</h1>
<h2>{{msg}}</h2>
<router-link to="/b">跳轉(zhuǎn)到b頁面</router-link>
<router-link to="/c">跳轉(zhuǎn)到c頁面</router-link>
</div>
</template>
<script>
export default {
name: 'helloworld',
data () {
return {
msg: 'Welcome to A Page'
};
},
methods: {
ajaxRequest() {
const obj = {
'aa': 1
};
Promise.all([this.$store.dispatch('testUrl', obj)]).then((res) => {});
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
/*
如果 to.meta.savedPosition === undefined 說明是刷新頁面或可以叫第一次進(jìn)入頁面 需要刷新數(shù)據(jù)
如果to.meta.keepAlive === false, 那么說明是需要請求的;
此時需要刷新數(shù)據(jù)，獲取新的列表內(nèi)容。
否則的話 什么都不做，直接使用 keep-alive中的緩存
*/
if (to.meta.savedPosition === undefined) {
vm.ajaxRequest();
}
if (!to.meta.keepAlive) {
vm.ajaxRequest();
}
})
}
};
</script>注意 b組件到a組件不重新請求數(shù)據(jù) (包括點擊鏈接和瀏覽器后退按鈕)，c組件到a組件請求數(shù)據(jù)(包括點擊鏈接和瀏覽器后退按鈕).
總結(jié)
以上所述是小編給大家介紹的vue2中的keep-alive使用總結(jié)及注意事項，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家介紹了.env在mode文件中如何添加注釋詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
今天小編就為大家分享一篇vue項目中錨點定位替代方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本文主要介紹了使用vite構(gòu)建vue3項目的方法步驟，vite支持性肯定比傳統(tǒng)的打包工具好，下面我們就來介紹一下使用vite構(gòu)建vue3項目，感興趣的可以參考一下2023-05-05
vue封裝全局彈窗警告組件this.$message.success問題
這篇文章主要介紹了vue封裝全局彈窗警告組件this.$message.success問題,具有很的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要介紹了vue下使用nginx刷新頁面404的問題解決,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
Hexo已經(jīng)看膩了，來手把手教你使用VuePress搭建個人博客
vuepress是尤大大4月12日發(fā)布的一個全新的基于vue的靜態(tài)網(wǎng)站生成器，實際上就是一個vue的spa應(yīng)用，內(nèi)置webpack，可以用來寫文檔。這篇文章給大家介紹了VuePress搭建個人博客的過程，感興趣的朋友一起看看吧2018-04-04
本篇文章主要介紹了Vue插件寫、用詳解（附demo），插件就是指對Vue的功能的增強(qiáng)或補(bǔ)充。有興趣的可以了解一下。2017-03-03
這篇文章主要為大家介紹了vue2從數(shù)據(jù)到視圖渲染之模板渲染詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue項目使用electron進(jìn)行打包操作的全過程
我們都知道Electron項目分為了主進(jìn)程和渲染進(jìn)程,主進(jìn)程其實就是我們的Electron,渲染進(jìn)程就相當(dāng)于我們的Vue項目,下面這篇文章主要給大家介紹了關(guān)于vue項目使用electron進(jìn)行打包操作的全過程,需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了Vue3源碼解讀靜態(tài)提升示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08