当前位置: 首页 > news >正文

vue的动态组件 keep-alive

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的值

控制台查看

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

5. 总结


http://www.mrgr.cn/news/49478.html

相关文章:

  • Informer: Beyond Efficient Transformer for Long SequenceTime-Series Forecasting
  • Java中的Iterator接口,以及HashSet和TreeSet
  • 蓝桥备战国奖题后总结(2)
  • 关于multiprocessing使用freeze_support()方法
  • FastAPI中的流式响应:实现实时数据传输
  • 根据Vue对比来深入学习React 下 props 组件传值 插槽 样式操作 hooks 高阶组件 性能优化
  • 深入Semantic Kernel:插件开发与实践应用(进阶篇)
  • 【FFmpeg系列】:图片处理
  • AI开发-三方库-Hugging Face-Model
  • 自动化测试-selenium
  • Spring学习——SpringAOP
  • 【LeetCode热题100】分治-快排
  • 刷c语言练习题8(牛客网)
  • BWA -A -B -O -E参数控制比对得分
  • java项目之精准扶贫管理系统源码(springboot+mysql+vue)
  • AI开发-三方库-Hugging Face-Pipelines
  • 【C++】--内存管理
  • 视频剪辑必备!优质视频素材获取途径
  • 数据结构与算法——Java实现 35.求数据流中的第K大元素
  • 攻防世界2