作用：
在vue項目中,難免會有列表頁面或者搜索結果列表頁面,點擊某個結果之后,返回回來時,如果不對結果頁面進行緩存,那么返回列表頁面的時候會回到初始狀態,但是我們想要的結果是返回時這個頁面還是之前搜索的結果列表,這時候就需要用到vue的keep-alive技術了.
介紹：
keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。
用法也很簡單：
<keep-alive>
<component>
<!-- 該組件將被緩存！ -->
</component>
</keep-alive>
props
- include - 字符串或正則表達，只有匹配的組件會被緩存
- exclude - 字符串或正則表達式，任何匹配的組件都不會被緩存
1 // 組件 a 2 export default { 3 name: 'a', 4 data () { 5 return {} 6 } 7 }
1 <keep-alive include="a"> 2 <component> 3 <!-- name 為 a 的組件將被緩存！ --> 4 </component> 5 </keep-alive>//可以保留它的狀態或避免重新渲染
1 <keep-alive exclude="a"> 2 <component> 3 <!-- 除了 name 為 a 的組件都將被緩存！ --> 4 </component> 5 </keep-alive>//可以保留它的狀態或避免重新渲染
但實際項目中,需要配合vue-router共同使用.
router-view 也是一個組件，如果直接被包在 keep-alive 里面，所有路徑匹配到的視圖組件都會被緩存：
1 <keep-alive> 2 <router-view> 3 <!-- 所有路徑匹配到的視圖組件都會被緩存！ --> 4 </router-view> 5 </keep-alive>
如果只想 router-view 里面某個組件被緩存，怎么辦？
增加 router.meta 屬性：
1 // routes 配置 2 export default [ 3 { 4 path: '/', 5 name: 'home', 6 component: Home, 7 meta: { 8 keepAlive: true // 需要被緩存 9 } 10 }, { 11 path: '/:id', 12 name: 'edit', 13 component: Edit, 14 meta: { 15 keepAlive: false // 不需要被緩存 16 } 17 } 18 ]
1 <keep-alive> 2 <router-view v-if="$route.meta.keepAlive"> 3 <!-- 這里是會被緩存的視圖組件，比如 Home！ --> 4 </router-view> 5 </keep-alive> 6 7 <router-view v-if="!$route.meta.keepAlive"> 8 <!-- 這里是不被緩存的視圖組件，比如 Edit！ --> 9 </router-view>
總結：
<keep-alive>是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。
<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。
keep-alive生命周期鈎子函數：activated、deactivated
使用<keep-alive>會將數據保留在內存中，如果要在每次進入頁面的時候獲取最新的數據，需要在activated階段獲取數據，承擔原來created鈎子中獲取數據的任務。