Vue 组件_动态组件+keep-alive

Vue 动态组件 + keep-alive

知识点讲解

通过 Vue 的 <component> 组件和特殊的 is 属性实现的。

<!-- curentComponent 改变时组件也改变 -->
<component :is="componentMap[curentComponent]""></component>

被传给 :is 的值可以是以下几种：

• 被注册的组件名
• 导入的组件对象

除了以上两种，也可以使用 is 属性创建一般的 HTML 元素，只要将 is 属性的值设置为任意 HTML 元素标签名，比如 ‘div’、‘span’、‘a’ 等，Vue 将会根据这个值创建相应的元素。

业务场景实例

访问某系统，跳转系统登录页，左侧展示图片和公司宣传语，右侧展示登录相关信息。左侧内容固定不变，针对不同情况右侧展示的登录信息不同，这种情况右侧区域可以采用动态组件实现不同内容的切换。
业务逻辑流转如下：

1. 访问系统，展示【登陆账户】，输入手机号，点击登录/注册按钮。
2. 后端验证该手机号是否注册，如果暂未注册，展示【输入验证码】。
3. 验证码校验通过，展示【请设置密码】。
4. 密码确认之后，展示【登录账户】。
5. 点击重置密码，展示【设置新密码】。

当然除此场景以外，tab 的切换场景也非常常见。

代码实现

代码涉及知识点 Typescript 工具类型 Record<Keys, Type>

import Login from './components/Login.vue'
import Code from './components/VerifyCode.vue'
import SetPassword from './components/SetPassword.vue'
import Password from './components/Password.vue'
import SetNewPassword from './components/SetNewPassword.vue'const curentComponent = ref<string>('Login')const componentMap = shallowRef<Record<string, Component>>({Login,Password,Code,SetPassword,SetNewPassword
})// 不同的时机修改 curentComponent.value 

❗❗❗ 注意点
Vue2 是通过组件名称切换的，Vue3 是通过组件实例切换的。
如果直接把组件实例放到 reactive 中代理，Vue 会发出警告。告知我们可以通过 shallowRef 或者 markRaw 跳过 proxy 代理。因为组件实例进行响应式代理毫无意义，且浪费性能。

keep-alive

本节内容涉及 Vue Devtools 插件下载、安装和应用
当使用 <component :is=“…”> 在多个组件间作切换时，被切换掉的组件会被卸载。我们可以通过 <keep-alive> 组件强制被切换掉的组件仍然保持“存活”的状态。

当使用 <keep-alive> 缓存了组件而不是频繁创建和销毁(开销大)。

有三个属性:

• include 组件名只要匹配添加的名称表示会被缓存。

• exclude 组件名匹配添加的名称表示不会被缓存。

• max 设置最多缓存实例数。一般用于页面级别缓存。

  <!-- include/exclude 支持以下格式设置 -->
  <!-- 以英文逗号分隔的字符串 -->
  <KeepAlive include="a,b"><component :is="view" />
  </KeepAlive><!-- 正则表达式 (需使用 `v-bind`) -->
  <KeepAlive :include="/a|b/"><component :is="view" />
  </KeepAlive><!-- 数组 (需使用 `v-bind`) -->
  <KeepAlive :include="['a', 'b']"><component :is="view" />
  </KeepAlive><!-- 设置最大缓存实例数 -->
  <KeepAlive :max="10"><component :is="activeComponent" />
  </KeepAlive>
  

涉及两个生命周期：

• deactived：组件失效时触发。一般用于做一些未存储数据的提示。
• actived：当组件被激活时。一般用于做一些页面初始化的数据查询。

除了配合 <component :is=“…”> 使组件保持存活状态，还可以配合路由 <router-view> 使用可以使页面保留状态，避免重复渲染。

通过 Vue devtools 比较使用 <keep-alive> 缓存和不使用 <keep-alive> 缓存时组件的两种存在状态。

未缓存组件

缓存组件

访问过的三个组件都会存在，只是分为激活状态和失活状态，当重新访问组件进入激活状态时触发 actived 钩子函数，失活的触发 deactived 钩子函数。