當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue中的keep-alive

發布時間：2023/12/20 vue 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue中的keep-alive 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文轉載于：https://blog.csdn.net/xum222222/article/details/80322532

轉載僅供個人日后學習

https://www.cnblogs.com/jinzhenzong/p/7885643.html

keep-alive的作用主要是在組件切換時，保存組件的狀態，防止重復渲染引發性能問題。比如：常見的列表頁與詳情頁，當我們在列表頁通過滾動鼠標尋找到自己感興趣的標題時，點進去進入詳情頁，當瀏覽完詳情頁后返回到列表頁，此時我們希望返回的列表頁不是重新渲染后的列表頁，而是我們之前滾動到的位置，keep-alive 就可以幫助我們緩存列表頁的狀態，實現上述效果。keep-alive起到一個緩存作用，用來保存頁面的狀態（包括數據、操作等）。

demo實踐，感受keep-alive的作用
??demo中定義了兩個組件，Page1和Page2。并通過路由實現了兩個組件之間的切換。在page1頁面的輸入框中輸入一些內容后，切換到page2頁面，再從page2重新切換到page1時，通過keep-alive可以實現輸入框中的內容保持不變。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>keep-alive</title> </head> <body><div id="app"><router-link to="/page1">page1</router-link><router-link to="/page2">page2</router-link><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view></div><script src="https://unpkg.com/vue"></script><script src="https://unpkg.com/vue-router"></script><script>const Page1 = Vue.extend({template: `<div class="page1"><h1>page1</h1><input type="text" /></div>`,})const Page2 = Vue.extend({template: `<div class="page2"><h1>page2</h1></div>`,})const routes = [{path: '/page1',component: Page1,meta: {keepAlive: true,}},{path: '/page2',component: Page2,meta: {keepAlive: false,}},]const router = new VueRouter({routes,})const app = new Vue({router}).$mount('#app')</script> </body> </html> ---------------------

代碼copy到編輯器中保存為.html文件，用瀏覽器打開觀察結果。

上述demo中，通過在路由時，為組件Page1和Page2設置meta的keepAlive狀態來控制組件是否需要緩存。

轉載于:https://www.cnblogs.com/curo0119/p/10722544.html

總結

以上是生活随笔為你收集整理的vue中的keep-alive的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Vue
Alive

上一篇： React state和props使用
下一篇： axios，vue-axios在项目中的