Vue组件开发 - 动态组件 - 《前端笔记》

一、动态组件的基本使用
二、动态组件的生命周期
keep-alive

一、动态组件的基本使用

Vue 中提供了一个 <component> 元素，搭配 is属性来实现动态组件。

<template>
     <div>
         <component :is="current"></component>
     </div>
 </template>
 <script>
 import Home from "./Home.vue";
 export default {
     components: {
         Home
     },
     data() {
         return {
             current: "Home",
         };
     },
 };
 </script>

is属性用来设置<component>要显示的组件名称。当我们通过事件将current的值修改为其他组件的名字，就能实现组件之间的动态切换了。
示例代码如下：

 <template>
     <div>
         <button @click="current = 'Home'">Home</button>
         <button @click="current = 'Posts'">Posts</button>
         <button @click="current = 'Archive'">Archive</button>
         <component :is="current"></component>
     </div>
 </template>
 <script>
 import Home from "./Home.vue";
 import Posts from "./Posts.vue";
 import Archive from "./Archive.vue";
 export default {
     components: {
         Home,
         Posts,
         Archive,
     },
     data() {
         return {
             current: "Home",
         };
     },
 };
 </script>

二、动态组件的生命周期

动态组件在切换的过程中，会不断的进行销毁和重建。
也就意味着，当前组件被切换走的时候，会被销毁，会触发销毁阶段的两个生命周期函数：

 export default {
     beforeDestroy() {
         console.log('组件销毁前');
     },
     destroyed() {
         console.log('组件销毁完成');
     }
 }

新组件被切换显示出来时，会被重建，会触发创建阶段和挂载阶段的四个生命周期函数：

 export default {
     beforeCreate() {
         console.log("组件创建前");
     },
     created() {
         console.log("组件创建完成");
     },
     beforeMount() {
         console.log("组件挂载前");
     },
     mounted() {
         console.log("组件挂载完成");
     }
 };

keep-alive

一、基本使用

<keep-alive> 用来包裹 Vue 应用中需要缓存状态的组件。

 <template>
     <keep-alive>
         <component :is=""></component>
     </keep-alive>
 </template>
 <script>
 export default {
 }
 </script>

当动态组件被<keep-alive>包裹后，所有组件的状态都会保留在内存中。在后续动态组件的切换过程中，组件不会再经历销毁和重新。从而有效的防止了 DOM 的重复渲染，减少组件加载时间及性能消耗，提高了用户体验性。

二、keep-alive 的属性

<keep-alive>组件中还提供了以下属性：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

<!-- 只有组件名为 TabA 的组件被缓存 -->
<keep-alive include="TabA">
   <component :is="current"></component>
</keep-alive>
<!-- 只有组件名为 TabA 或 TabB 的组件被缓存 -->
<keep-alive :include="/Tab(A|B)/">
     <component :is="current"></component>
</keep-alive>
<!-- 除了组件名叫 TabA 的组件不被缓存，其他组件都被缓存 -->
<keep-alive exclude="TabA">
   <component :is="current"></component>
</keep-alive>

三、生命周期函数

被包含在<keep-alive>中的组件，会比普通组件多出两个生命周期函数：activated与deactivated。

activated：在<keep-alive>中组件被激活时调用，即进入组件时；
deactivated：在<keep-alive>中组件停用时调用，即离开组件时。
```
export default {
   activated() {
       console.log("进入组件时");
   },
   deactivated() {
       console.log("离开组件时");
   },
};
```
使用<keep-alive>包裹组件，会将组件的数据保留在内存中。如果希望每次进入页面时都获取最新的数据，需要在activated阶段获取数据，承担原来mounted钩子函数中获取数据的任务。