vue的动态组件 keep-alive

🕗 发布于 2024-10-14 14:24 javascript 前端 vue.js

1. 什么是动态组件

动态组件指的是 动态切换组件的显示与隐藏

2. 如何实现动态组件渲染

vue提供了一个内置的<component>组件，专门用来实现动态组件的渲染。

作用：组件的占位符
is的值表示要渲染的组件

示例代码如下：

Left.vue的代码

<template>
  <div class="box">这是左边的组件</div>
</template>

<script>
export default {
  name: "Left",
};
</script>

<style lang="less" scoped>
.box {
  background-color: pink;
  border: 1px solid;
  height: 400px;
  width: 400px;
  color: white;
}
</style>

Right.vue的代码

<template>
  <div class="box">这是右边的组件</div>
</template>

<script>
export default {
  name: "Right",
};
</script>

<style lang="less" scoped>
.box {
  background-color: blue;
  border: 1px solid;
  height: 400px;
  width: 400px;
  color: white;
}
</style>

App.vue的代码

<template>
  <div id="app">
    <div class="content">
      <component :is="name"></component>
    </div>
    <h1>这是一个App组件</h1>
    <button @click="name = 'Left'">显示Left</button>
    <button @click="name = 'Right'">显示Right</button>
  </div>
</template>

<script>
import Left from "@/components/Left";
import Right from "@/components/Right";
export default {
  name: "App",
  components: {
    Left,
    Right,
  },
  data() {
    return {
      name: "Left",
    };
  },
};
</script>
<style lang="less">
.content {
  display: flex;
}
</style>

3.keep-alive的使用

使用keep-alive可以保持状态，组件创建后不会被销毁，

那怕被隐藏了也不会被销毁。

使用keep-alive来保持状态

语法

<keep-alive>
    <组件名></组件名>
</keep-alvie>

Left.vue的代码

<template>
  <div class="box">
    <h3>这是左边的组件{{ count }}</h3>
    <button @click="count++">+1</button>
  </div>
</template>

<script>
export default {
  name: "Left",
  data() {
    return {
      count: 0,
    };
  },
  created() {
    console.log("Left组件被创建了");
  },
  destroyed() {
    console.log("Left组件被销毁了");
  },
};
</script>

<style lang="less" scoped>
.box {
  background-color: pink;
  border: 1px solid;
  height: 400px;
  width: 400px;
  color: white;
}
</style>

Right.vue的代码

<template>
  <div class="box">这是右边的组件</div>
</template>

<script>
export default {
  name: "Right",
};
</script>

<style lang="less" scoped>
.box {
  background-color: blue;
  border: 1px solid;
  height: 400px;
  width: 400px;
  color: white;
}
</style>

App.vue的代码

<template>
  <div id="app">
    <div class="content">
      <keep-alive>
        <component :is="name"></component>
      </keep-alive>
    </div>
    <h1>这是一个App组件</h1>
    <button @click="name = 'Left'">显示Left</button>
    <button @click="name = 'Right'">显示Right</button>
  </div>
</template>

<script>
import Left from "@/components/Left";
import Right from "@/components/Right";
export default {
  name: "App",
  components: {
    Left,
    Right,
  },
  data() {
    return {
      name: "Left",
    };
  },
};
</script>
<style lang="less">
.content {
  display: flex;
}
</style>

实现效果：

如下：显示右边的组件的时候，但其实左边的组件被销毁，只是状态变为了 inactive,Left组件被缓存了，缓存到了内存中。

3.1 keep-alive 对应的生命周期函数

当组件被缓存的时候，会自动触发 deactivated生命周期函数
当组件被激活的时候，会自动触发activited 生命周期函数

当组件第一次被激活的时候，既会执行 created生命周期函数，又会执行 activited生命周期函数
只有给组件用keep-alive标签包裹的时候，deactivited生命周期函数和activited函数才会被创建

3.2 keep-alive的相关属性

3.2.1 include属性（哪些组件需要被缓存）

因为没有指定哪个组件被缓存，哪个组件不缓存，所以默认被keep-alive包裹的所有组件都会被缓存。

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

匹配首先会检查组件自身的 name 属性，如果 name 属性不可用。则匹配它局部注册名称（也就是父组件的 components选项的键值）。匿名的组件不能被匹配

这里指的组件本身name属性是否可用，指的是组件的name属性是否被指定了值，如果指定了值，但与之不匹配的话，不会去父组件的componenst查看键值。

例如现在有一个需求：Left组件要求被缓存，Right组件不要求被缓存

3.2.2 exclude属性（哪些组件不需要被缓存）

exclude属性和include属性不能同时使用，只能用一个
只有名称匹配的组件才不会被缓存，多个组件名之间用 英文逗号 隔开
匹配的规则和 include属性一致，先匹配组件本身的name属性，如果不可用会匹配局部组件名称，即是 components的键值对

需求：Right组件不希望被缓存

4. 组件注册名称和组件声明名称的区别

如果在 声明组件 的时候，没有为组件指定 name 名称，则组件的名称默认就是 注册时候的名称

控制台查看

如果在声明的时候指定name的值，则组件的名称就是 name的值