Vue动态组件以及keep-alive的使用

文章目录

一、动态组件
- 1Vue的动态组件用法
二、keep-alive
- 2.1基础用法概念
- 2.2包含include和排除exclude属性
- [2.3 最大缓存实例数](#2.3 最大缓存实例数)
- [2.4 缓存实例的生命周期](#2.4 缓存实例的生命周期)

一、动态组件

1Vue的动态组件用法

javascript 复制代码

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
    <button @click="comName = 'Left' ">展示Left组件</button>
    <button @click="comName = 'Right' ">展示Right组件</button>

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
export default {
    data(){
    return{
      comName:'Left'
    }
  },
    components:{
    Right,
    Left
  },
}
    
</script>

核心就是用Vue官方内置的标签做组件占位符，它得配合:is动态绑定属性来用，:is的值必须是当前组件里注册过的子组件名，这样才能渲染对应的组件。而components是组件里的配置项，作用就是注册子组件，不管是用动态渲染，还是直接写组件标签用，都得先在这个配置项里注册导入的子组件，这是Vue的硬性规则，不注册的话Vue就不认识组件会报错。然后实现组件切换的话，就是给按钮绑@click点击事件，事件里直接写赋值语句修改:is绑定的那个变量就行，不用写methods，因为只是简单改值，这种内联写法就够用，点击按钮修改变量值，变量一变，:is的绑定值跟着变，页面就自动切换渲染对应的组件了，初始给变量赋哪个组件名，页面就默认渲染哪个组件，要是点了对应已渲染组件的按钮，变量值没变化，组件就不会有任何改动。还有Vue默认切换动态组件时，被隐藏的组件会被销毁，切回去又会重新创建，组件里的状态比如输入框内容就会丢，所以要给包一层Vue官方的内置标签keep-alive，它的作用就是缓存被切换隐藏的组件，不让组件销毁，保留组件的状态，下次切回来直接用缓存的组件就行，不用重新创建，这俩内置标签搭配用就是动态组件的最佳实践，要是不在乎状态丢失，也可以不加keep-alive。

二、keep-alive

2.1基础用法概念

复制代码

当使用 <component :is="..."> 来在多个组件间作切换时，被切换掉的组件会被卸载。

是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

同样也是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

我们可以通过组件强制被切换掉的组件仍然保持"存活"的状态

javascript 复制代码

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

2.2包含include和排除exclude属性

默认缓存内部所有组件，可通过include/exclude按需控制，按组件名匹配生效
include：白名单，仅写在此处的组件会被缓存
exclude：黑名单，写在此处的组件不缓存，其余正常缓存
用法场景：组件少、需缓存的少→用include；组件多、仅少数不缓存→用exclude（更高效）
二者不同时用，exclude优先级高于include

javascript 复制代码

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
 
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
 
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

2.3 最大缓存实例数

eep-alive的max属性核心要点

max 用来限制缓存的组件实例最大数量，需通过 v-bind 绑定数字
超出max值时，按LRU规则销毁缓存：删掉最久未被访问的组件实例，为新组件腾空间
避免缓存过多组件占用内存，适合动态切换组件数量多的场景

javascript 复制代码

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

2.4 缓存实例的生命周期

当一个组件实例从 DOM 上移除，但因为被缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。

当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。

一个持续存在的组件可以通过activated() 和deactivated()注册相应的两个状态的生命周期钩子

当组件第一次被创建的时候，既会执行 created 生命周期，也会执行 activated 生命周期当组件再次被激活的时候，只会触发

activated 生命周期，不再触发 created。因为组件没有被重新创建