在 Vue 中，可以通过使用 keep-alive 组件来缓存当前组件的状态，以避免每次切换路由时重新渲染组件，从而提高页面的加载速度和用户体验。

keep-alive 的原理是通过缓存组件的 vnode 来实现的。当组件被缓存时，其对应的 vnode 会被存储在 keep-alive 组件的内部缓存中。在下一次需要渲染该组件时，keep-alive 组件会直接从缓存中取出对应的 vnode，然后将其渲染到页面上。

当被缓存的组件需要更新时，keep-alive 组件会触发一系列的生命周期钩子函数，其中最重要的是 activated 和 deactivated 钩子函数。activated 钩子函数会在组件被激活时调用，而 deactivated 钩子函数会在组件被停用时调用。开发者可以通过这两个钩子函数来控制组件的更新行为。

以下是一个使用 keep-alive 缓存组件的示例：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <keep-alive>
      <component :is="currentComponent" />
    </keep-alive>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA',
      cache: true
    }
  },
  methods: {
    toggle() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    }
  },
  activated() {
    console.log('Component activated')
  },
  deactivated() {
    console.log('Component deactivated')
  }
}
</script>

在上述示例中，我们使用 keep-alive 包裹了一个动态组件，通过切换 currentComponent 的值来显示不同的组件。当我们切换组件时，keep-alive 组件会缓存当前的组件，然后在下一次显示时直接从缓存中取出。同时，我们也定义了 activated 和 deactivated 钩子函数来监控组件的状态变化。