vue中keep-alive的用法及問題描述

更新時(shí)間：2018年05月15日 14:27:37 作者：三行情書愿你有夢

這篇文章主要介紹了vue中keep-alive的用法及問題描述,本文給大家介紹的非常詳細(xì)，具有一定的參考解決價(jià)值，需要的朋友可以參考下

1.keep-alive的作用以及好處

在做電商有關(guān)的項(xiàng)目中，當(dāng)我們第一次進(jìn)入列表頁需要請(qǐng)求一下數(shù)據(jù)，當(dāng)我從列表頁進(jìn)入詳情頁，詳情頁不緩存也需要請(qǐng)求下數(shù)據(jù)，然后返回列表頁，這時(shí)候我們使用keep-alive來緩存組件，防止二次渲染，這樣會(huì)大大的節(jié)省性能。

2.keep-alive的基本用法

在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>

需要緩存的組件內(nèi)容直接在router中添加：

meta: {
 keepAlive: true // true 表示需要使用緩存 false表示不需要被緩存
 }

3.keep-alive的生命周期

當(dāng)引入keep-alive的時(shí)候，頁面第一次進(jìn)入，鉤子的觸發(fā)順序created-> mounted-> activated，退出時(shí)觸發(fā)deactivated。當(dāng)再次進(jìn)入（前進(jìn)或者后退）時(shí)，只觸發(fā)activated。

下面看下vue中 keep-alive 的使用問題及解決方案

問題描述

在業(yè)務(wù)開發(fā)中，會(huì)有路由跳轉(zhuǎn)但是返回需要保留數(shù)據(jù)的場景；vue 中提供了 keep-alive 來處理

解決方案

返回dom不讓其重新刷新，在vue-view外面包一層, 當(dāng)引入keep-alive的時(shí)候，頁面第一次進(jìn)入，鉤子的觸發(fā)順序created-> mounted-> activated，退出時(shí)觸發(fā)deactivated。當(dāng)再次進(jìn)入（前進(jìn)或者后退）時(shí)，只觸發(fā)activated。

事件掛載的方法等，只執(zhí)行一次的放在 mounted 中；組件每次進(jìn)去執(zhí)行的方法放在 activated 中；
可以將是否包裹 keep-alive 通過參數(shù)配置；

<keep-alive>
  <router-view v-if="$route.meta.keepAlive" style="min-height:100%"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" style="min-height:100%"></router-view>
//不需要刷新的路由配置里面配置 meta: {keepAlive: true}, 這個(gè)路由則顯示在上面標(biāo)簽；
//需要刷新的路由配置里面配置 meta: {keepAlive: false}, 這個(gè)路由則顯示在下面標(biāo)簽；

總結(jié)

以上所述是小編給大家介紹的vue中keep-alive的用法及問題描述，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: