這次給大家?guī)韛ue中keep-alive使用方法詳解，vue中keep-alive使用的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

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

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

2.keep-alive的基本用法

在app.vue中

需要緩存的組件內(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ù)配置；

//不需要刷新的路由配置里面配置 meta: {keepAlive: true}, 這個(gè)路由則顯示在上面標(biāo)簽；

//需要刷新的路由配置里面配置 meta: {keepAlive: false}, 這個(gè)路由則顯示在下面標(biāo)簽；

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

總結(jié)

以上是生活随笔為你收集整理的keep alive PHP,vue中keep-alive使用方法详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。