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. 总结

相关推荐
Domain-zhuo4 分钟前
Git常用命令
前端·git·gitee·github·gitea·gitcode
菜根Sec34 分钟前
XSS跨站脚本攻击漏洞练习
前端·xss
web1508541593537 分钟前
vue 集成 webrtc-streamer 播放视频流 - 解决阿里云内外网访问视频流问题
vue.js·阿里云·webrtc
m0_7482571840 分钟前
Spring Boot FileUpLoad and Interceptor(文件上传和拦截器,Web入门知识)
前端·spring boot·后端
桃园码工1 小时前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
百万蹄蹄向前冲2 小时前
2024不一样的VUE3期末考查
前端·javascript·程序员
轻口味2 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami2 小时前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
wakangda3 小时前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡3 小时前
lodash常用函数
前端·javascript