Vue动态组件和keep-alive组件实例详解

动态组件

多个组件使用同一个挂载点，并可以动态切换，这就是动态组件。

格式

    <component :is="comName"></component>

注意点

is只能是动态属性，:is="组件注册后的标签名字符串或data变量"
不能直接拿注册标签名赋值使用

使用效果

需求: 完成一个注册功能页面, 2个按钮切换, 额外封装两个组件：一个填写注册信息, 一个填写用户简介信息。

目录结构

根组件
├── App.vue
└── components
    ├── UserName.vue # 用户名和密码输入框
    └── UserInfo.vue # 人生格言和自我介绍框

操作

UserName.vue

<template>
  <div>
    <h2>UserName</h2>
    <p>用户名:<input /> </p>
    <p>密码:<input /> </p>
  </div>
</template>

<script>
export default {

}
</script>

UserInfo.vue

<template>
  <div>
    <h2>UserInfo.vue</h2>
    <p>人生格言:<input /> </p>
    <p>自我介绍:<textarea /> </p>
  </div>
</template>

<script>
export default {

}
</script>

父组件APP.vue

<template>
  <div>
    <button @click="comName = 'UserName'">账号密码填写</button>
    <button @click="comName = 'UserInfo'">个人信息填写</button>

    <p>下面显示注册组件:</p>
    <div style="border: 1px solid red">
      <!-- vue内置的组件component, 可以动态显示组件 -->
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import UserName from "./UserName";
import UserInfo from "./UserInfo";
export default {
  data() {
    return {
      comName: "UserName",
    };
  },
  components: {
    UserName,
    UserInfo,
  },
};
</script>

效果

小结

vue内置component组件, 配合is属性, 设置要显示的组件标签名字。

keep-alive组件

使用背景

组件切换会导致组件被频繁销毁和重新创建, 大多数情况下是有自己的意义的，但也可能会导致不必要的性能损耗。

解决方法

使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁。

使用keep-alive组件

<keep-alive>
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>

使用keep-alive组件会补充两个生命周期：

activated -激活
deactivated -失去激活状态

小结

keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法。

keep-alive组件-指定缓存

keep-alive默认会将所有包裹的组件进行缓存，使用include属性可以指定缓存组件。

语法

写法1： include="组件名1,组件名2..."
写法2： :include="['组件名1'， '组件名2']"

<keep-alive include="name1,name2">
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>

注意：

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。

频道导航