vue的动态组件 keep-alive

1. 什么是动态组件

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

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

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

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

示例代码如下:

Left.vue的代码

javascript 复制代码
<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的代码

javascript 复制代码
<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的代码

javascript 复制代码
<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来保持状态

  • 语法

    html 复制代码
    <keep-alive>
        <组件名></组件名>
    </keep-alvie>

Left.vue的代码

javascript 复制代码
<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的代码

javascript 复制代码
<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的代码

javascript 复制代码
<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的值

控制台查看

  • 组件的 注册名称应用场景是 :以标签的形式,把注册好的组件,渲染和使用到页面结构之中。
  • 组件的 声明名称应用场景:结合 keep-alive标签实现缓存功能,以及在调试工具中看到的组件 name 名称

5. 总结

相关推荐
江号软件分享几秒前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端
灵犀学长9 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
源码云商17 分钟前
基于 SpringBoot + Vue 的 IT 技术交流和分享平台的设计与实现
vue.js·spring boot·后端
江号软件分享18 分钟前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM25 分钟前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
慧一居士1 小时前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead1 小时前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码7 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子7 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年7 小时前
从前端转go开发的学习路线
前端·学习·golang