vue中的内置组件：keep-alive

基本功能

<keep-alive> 的核心作用是：

1. 缓存动态组件：动态组件在切换时不会被卸载，而是会被保留在内存中。
2. 保留组件状态：被缓存的组件会保留其数据状态以及 DOM 状态。
3. 优化性能：减少重复的组件初始化、渲染和销毁操作。

---

常见使用场景

• 动态组件切换：当使用 <component :is="componentName"> 来动态加载组件时，配合 <keep-alive> 可以缓存这些动态组件。
• 路由缓存：结合 Vue Router 使用，可以在切换路由时缓存某些页面组件，避免重新加载和初始化。

---

基本语法

<keep-alive>
  <component :is="componentName" />
</keep-alive>

示例代码：

<template>
  <div>
    <button @click="currentView = 'viewA'">显示 ViewA</button>
    <button @click="currentView = 'viewB'">显示 ViewB</button>
    <keep-alive