Vue:defineAsyncComponent(异步组件)、component(动态组件)、keep-alive(缓存组件)
异步组件:defineAsyncComponent
Vue3 的 defineAsyncComponent 特性可以让我们延迟加载组件。因为在默认情况下,在构建项目或运行项目时,会将所有所需要的打包成一个整体,vue为单页面应用,同步加载大量的页面代码会导致页面长时间处于空白情况,所以
这是一个改善初始页面加载的好方法,因为该方法会将以较小的块加载,而不必在页面加载时加载每个组件。
来自官网可查看示例:异步组件
import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() => {return new Promise((resolve, reject) => {// ...load component from serverresolve(/* loaded component */)})
})
// ... use `AsyncComp` like a normal component
使用 import 引入 所需组件
// 使用
<AsyncComp ></AsyncComp >import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() =>import('./components/MyComponent.vue')
)
defineAsyncComponent 可配置参数:
const AsyncComp = defineAsyncComponent({// the loader functionloader: () => import('./Foo.vue'),// A component to use while the async component is loadingloadingComponent: LoadingComponent,// Delay before showing the loading component. Default: 200ms.delay: 200,// A component to use if the load failserrorComponent: ErrorComponent,// The error component will be displayed if a timeout is// provided and exceeded. Default: Infinity.timeout: 3000
})
动态组件:component
可以根据条件动态选择要渲染的组件。通过使用动态组件,可以基于不同的状态条件来切换不同的组件,从而实现更灵活的组件复用和组合
使用情景:有的时候,在页面中需要在不同组件之间进行动态切换,这时候除了条件渲染,还可以使用动态组件来实现
注意:
is属性的值必须是以字符串形式指定的已注册组件的名称。:is则会将表达式的值作为字符串解析,从而动态地渲染相应的组件。- vue3 setup 语法糖跟vue2区别 引入不能直接赋值给:is 必须定义
<!-- 父组件 -->
<template>
<div class=''><component :is="childOneCom"></component>
</div>
</template><script setup>
import childOne from "./childOne.vue";const childOneCom = ref(childOne);</script>
<style lang='scss' scoped>
</style>
缓存组件:keep-alive
keep-alive 包裹的组件(component)在被隐藏后,并不会将组件销毁,而是将其缓存起来,下次再次使用时会从缓存中取出复用的过程。 只执行了(创建前后、挂载前后),没有执行销毁函数,当再次切回时,不执行创建前后、挂载前后的生命周期函数了,而是只执行了父组件的更新前后函数执行
参数:
- include:匹配的路由/组件被缓存
- exclude:匹配的路由/组件不被缓存
- max:最大缓存数
include/exclude:使用逗号分割、正则形式,必须采用v-bind形式、数组形式,必须采用v-bind形式
匹配规则:
- 首先匹配组件的name选项
- 如果name选项不可用,则匹配它的局部注册名称(父组件components选项的键值)
- 匿名组件,不可匹配(路由组件没有name选项,并且没有注册的组件名)
- 只能匹配当前被包裹的组件,不能匹配更下面嵌套的子组件=>例如:只能匹配路由组件的name选项,不能匹配路由组件里面的嵌套组件name选项
- 不会在函数式组件中正常工作,因为他们没有缓存实例
- exclude的优先级>include
<!-- 逗号分隔字符串 --><keep-alive include="one,two"><component :is="three"></component></keep-alive><!-- 正则表达式 (使用 v-bind) --><keep-alive :include="/one|two/"><component :is="three"></component></keep-alive><!-- 数组形式 (使用 v-bind) --><keep-alive :include="['one', 'two']"><component :is="three"></component></keep-alive><!— 缓存路由 --><keep-alive include='two'><router-view></router-view></keep-alive>
vue2.x vue3.x 区别
在App.vue中
<!-- vue2.x配置 -->
<template><keep-alive><router-view v-if="$route.meta.keepAlive" /></keep-alive><router-view v-if="!$route.meta.keepAlive"/>
</template><!-- vue3.0配置 -->
<template><router-view v-slot="{ Component }"><keep-alive><component :is="Component" v-if="$route.meta.keepAlive"/></keep-alive><component :is="Component" v-if="!$route.meta.keepAlive"/></router-view>
</template>
vue3.x 中使用name属性
-
插件vite-plugin-vue-setup-extend
-
<script>export default {name: 'xxx',} </script><script setup></script> -
<script>export default {name: 'xxx',setup(){return {}},} </script> -
import { defineComponent } from 'vue'; defineOptions({name: 'xxx', })
总结:
可根据实际情况 结合、拆分使用
相关文章:
Vue:defineAsyncComponent(异步组件)、component(动态组件)、keep-alive(缓存组件)
异步组件:defineAsyncComponent Vue3 的 defineAsyncComponent 特性可以让我们延迟加载组件。因为在默认情况下,在构建项目或运行项目时,会将所有所需要的打包成一个整体,vue为单页面应用,同步加载大量的页面代码会导…...
14 款最佳文件恢复软件 [2024 年最佳精选工具]
顶级文件恢复软件的综合列表和比较。阅读此详细评论以选择最佳文件恢复工具并轻松恢复您的文件: 您在选择文件恢复工具时遇到困难吗?在阅读了对十大文件恢复软件的评论后,您可以做出正确的决定。 数据丢失是一个严重的问题,会损…...
Redis基础篇-004 Redis的Java客户端
Redis客户端分为三类: 命令行客户端图形化桌面客户端编程客户端(java客户端) redis可视化工具和客户端 1、 Jedis快速入门 Jedis的官网地址: https://github.com/redis/jedis 1.1 新建一个Maven工程并引入以下依赖 <!--引入…...
【数据结构和算法】---栈和队列的互相实现
目录 一、用栈实现队列1.1初始化队列1.2模拟入队列1.3模拟出队列1.4取模拟的队列头元素1.5判断队列是否为空 二、用队列实现栈2.1初始化栈2.2模拟出栈2.3模拟入栈2.4取模拟的栈顶元素2.5判读栈是否为空 一、用栈实现队列 具体题目可以参考LeetCode232. 用栈实现队列 首先要想到…...
机场信息集成系统系列介绍(6):机场协同决策支持系统ACDM
目录 一、背景介绍 1、机场协同决策支持系统是什么? 2、发展历程 3、机场协同决策参与方 4、相关定义 二、机场协同决策ACDM的建设目标 (一)机场协同决策支持系统的宏观目标 1、实现运行数据共享和前序航班信息透明化 2、实现地面资源…...
GO设计模式——17、解释器模式(行为型)
目录 解释器模式(Interpreter Pattern) 解释器模式的核心角色: 优缺点 代码实现 解释器模式(Interpreter Pattern) 解释器模式(Interpreter Pattern)提供了评估语言的语法或表达式的方式&am…...
基于SSM的大学生兼职平台的设计与实现
文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SSM的大学生兼职平台的设计与实现,j…...
Ignite内存配置
配置内存 #1.内存架构 #1.1.概述 Ignite内存架构通过可以同时在内存和磁盘上存储和处理数据及索引,得到了支持磁盘持久化的内存级性能。 多层存储的运行方式类似于操作系统(例如Linux)的虚拟内存。但是这两种类型架构之间的主要区别是&…...
前端基础vue路由懒加载
为什么用路由懒加载 首屏组件加载速度更快一些,解决白屏问题,常言道需要就加载,不需要就先放一边 懒加载定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。 使用 常用的懒加载方式有两种:即…...
C++系列第九篇 数据类型下篇 - 复合类型(指针高级应用)
系列文章 C 系列 前篇 为什么学习C 及学习计划-CSDN博客 C 系列 第一篇 开发环境搭建(WSL 方向)-CSDN博客 C 系列 第二篇 你真的了解C吗?本篇带你走进C的世界-CSDN博客 C 系列 第三篇 C程序的基本结构-CSDN博客 C 系列 第四篇 C 数据类型…...
python三大开发框架django、 flask 和 fastapi 对比
本文讲述了什么启发了 FastAPI 的诞生,它与其他替代框架的对比,以及从中汲取的经验。 如果不是基于前人的成果,FastAPI 将不会存在。在 FastAPI 之前,前人已经创建了许多工具 。 几年来,我一直在避免创建新框架。首先&…...
html基础2
视频video <video src"视频的路径"controls"控制播放、暂停、音量等"autoplay"自动播放"loop"循环播放"width"视频播放器的宽度"height"视频播放器的高度"> </video>还有做浏览器兼容的方式…...
基于博弈树的开源五子棋AI教程[5 启发式搜索]
文章目录 1 最大化攻击者/最小化防守者排序2 置换表启发3 杀手表启发4 历史表启发历史表以及杀手表的维护初始化追加杀手表项清空杀手表 启发式搜索的姿势千奇百怪,本文只讨论一下几种 //搜索空间 #define Search_Space_MVA 0 //最优价值攻击者[分数最大] #d…...
JavaScript原型,原型链 ? 有什么特点?
一、原型 JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象 当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个…...
Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题
Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题 目录 Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题 一、简单介绍…...
linux 中 C++的环境搭建以及测试工具的简单介绍
文章目录 makefleCMakegdb调试 与 coredumpValgrind 内存检测gtest 单元测试 makefile 介绍 安装 : sudo apt install make makefile 的规则: 举例说明 包括:目标文件 、 依赖文件 、 生成规则 使用 : make make clean CMake : CMake是一个…...
448. 找到所有数组中消失的数字
找到所有数组中消失的数字 描述 : 给你一个含 n 个整数的数组 nums ,其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字,并以数组的形式返回结果。 题目 : LeetCode 448. 找到所有数组中消失的数字: 448. 找…...
为何在下雪天它“失宠”了,传统雪地靴居然不适合下雪穿
随着冬至的到来,一年之中最寒冷的“三九天”正式拉开序幕。近期各地纷纷下起了大雪,在这场大雪中雪地靴似乎“失宠”了。在社交媒体上,有网友吐槽“雪地靴根本不能下雪穿”,后面有不少网友纷纷分享了自己在雪地靴上尴尬的经历&…...
第34节: Vue3 调用内联处理程序中的方法
在UniApp中使用Vue3框架时,你可以在模板中直接调用组件内联处理程序中的方法。以下是一个示例: <template> <view> <button click"handleClick">Click me</button> <p>{{ message }}</p> </view&…...
JavaScript--明明白白Promise (Park One)
明明白白Promise (Park One) Promise是一种用于处理异步操作的特殊对象。它代表了一个尚未完成但最终会完成的操作,并可以在操作完成后返回结果或错误。 Promise有三种状态:pending(进行中)、fulfilled(已完成&#…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码: https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档),如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下,风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
