动态组件、keep-alive

动态组件
动态组件指的是动态切换组件的显示与隐藏
如何实现动态组件渲染
vue 提供了一个内置的 <component> 组件,专门用来实现动态组件的渲染,示例代码如下:

<!-- 通过 is 属性 动态指定要渲染的组件 -->
<component :is="comName" text="'我是参数'"></component>

<!-- 点击按钮 动态切换组件的名称 -->
<button @click="comName = 'Left'">展示 Left 组件</button>
<button @click="comName = 'Right'">展示 Right组件</button>

data() {
// 当前要渲染的组件名称
	return { comName: 'Left' }
}

使用keep-alive保持状态
在 component 标签中的组件会被动态的创建和销毁,此时组件中的数据会在再次创建时被重置
此时使用 vue 内置的 keep-alive 标签可以让其中的标签被缓存在内存中,不会被销毁
代码示例:

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

<keep-alive> 要求同时只有一个子元素被渲染。

keep-alive对应的生命周期函数
当组件被缓存时,会自动触发组件的 deactivated 生命周期函数
当组件被激活时,会自动触发组件的 activated 生命周期函数
代码示例:

// 当组件第一次被创建的时候 既会执行 created 也会执行 activated
// 但是 组件被激活的时候 只会触发 activated 不再触发 created 因为组件没有被重新创建
activated() {
  console.log('组件被激活了');
},
deactivated() {
  console.log('组件被缓存了');
}

事件可以定义在与 created 函数同级的位置

keep-alive的include属性
include 属性用来指定: 只有名称匹配的组件会被缓存,多个组件名之间使用英文的逗号分隔

<keep-alive include="MyLeft,MyRight">
  <component :is="comName"></component>
</keep-alive>

include 内的组件只有一个能被缓存

keep-alive的exclude属性
exclude 属性用来指定: 只有指定的组件被排除,即不会被缓存,其余组件则会被缓存

<keep-alive exclude="Right">
	<component :is="comName"></component>
</keep-alive>

exclude 与 include 只能二选一,不能同时使用
:include="a,b"
:include=" /a|b/ "
:include="['a', 'b']"
二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

keep-alive的max属性
最多可以缓存多少组件实例。缓存实例达到指定数字，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

组件的名称name属性

export default {
  // 当提供了 name 属性之后 组件的名称 就是 name 属性的值
  // 对比
  // 组件的"注册名称" 主要应用场景: 以标签的形式 把注册好的组件 渲染和使用到页面结构中
  // 组件声明时候的"name"名称的主要应用场景 结合 keep-alive 标签实现组建的缓存功能 以及在调试工具中看到组建的 name 名称
  name: 'MyRight'
}

当在组件中定义了 name 属性后,在其他组件用到组件名时需要使用组件的 name 属性定义的名称

也可以结合 transition 使用

<transition>
  <keep-alive>
 		<component :is="view"></component>
	</keep-alive>
</transition>

下篇文章介绍了关于keep-alive的坑和各种需求
这大概是最全乎的keep-alive踩坑指南 - 掘金