1.keep-alive的作用以及好處
在做電商有關的項目中，當我們第一次進入列表頁需要請求一下數據，當我從列表頁進入詳情頁，詳情頁不緩存也需要請求下數據，然後返回列表頁，這時候我們使用keep-alive來緩存組件，防止二次渲染，這樣會大大的節省性能。
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>
需要緩存的組件內容直接在router中添加：
meta: {
keepAlive: true // true 表示需要使用緩存 false表示不需要被緩存
}
3.keep-alive的生命週期
當引入keep-alive的時候，頁面第一次進入，鉤子的觸發順序created-> mounted-> activated，退出時觸發deactivated。當再次進入（前進或者後退）時，只觸發activated。
下面看下vue中 keep-alive 的使用問題及解決方案
問題描述
在業務開發中，會有路由跳轉但是返回需要保留數據的場景；vue 中提供了 keep-alive 來處理
解決方案
返回dom不讓其重新刷新，在vue-view外面包一層, 當引入keep-alive的時候，頁面第一次進入，鉤子的觸發順序created-> mounted-> activated，退出時觸發deactivated。當再次進入（前進或者後退）時，只觸發activated。
事件掛載的方法等，只執行一次的放在 mounted 中；組件每次進去執行的方法放在 activated 中；
可以將 是否包裹 keep-alive 通過參數配置；
<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}, 這個路由則顯示在上面標籤；
//需要刷新的路由配置裏面配置 meta: {keepAlive: false}, 這個路由則顯示在下面標籤；
總結
以上所述是小編給大家介紹的vue中keep-alive的用法及問題描述，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對我們網站的支持！
您可能感興趣的文章:
- 解決vue單頁使用keep-alive頁面返回不刷新的問題
- vue2中的keep-alive使用總結及注意事項
- vue項目優化之通過keep-alive數據緩存的方法
- vue使用keep-alive實現數據緩存不刷新
- Vue keep-alive實踐總結（推薦）
- 深入理解vue-router之keep-alive
- 詳解Vue路由開啓keep-alive時的注意點