vue中keep-alive的使用

Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

使用<keep-alive> 会多两个生命周期钩子：

1. activated：在 keep-alive 组件激活时调用
2. deactivated：在 keep-alive 组件停用时调用

缓存所有页面

在App.vue中使用<keep-alive>

<template>
  <div id="app">
  	<keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>