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

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(缓存组件)

异步组件&#xff1a;defineAsyncComponent Vue3 的 defineAsyncComponent 特性可以让我们延迟加载组件。因为在默认情况下&#xff0c;在构建项目或运行项目时&#xff0c;会将所有所需要的打包成一个整体&#xff0c;vue为单页面应用&#xff0c;同步加载大量的页面代码会导…...

14 款最佳文件恢复软件 [2024 年最佳精选工具]

顶级文件恢复软件的综合列表和比较。阅读此详细评论以选择最佳文件恢复工具并轻松恢复您的文件&#xff1a; 您在选择文件恢复工具时遇到困难吗&#xff1f;在阅读了对十大文件恢复软件的评论后&#xff0c;您可以做出正确的决定。 数据丢失是一个严重的问题&#xff0c;会损…...

Redis基础篇-004 Redis的Java客户端

Redis客户端分为三类&#xff1a; 命令行客户端图形化桌面客户端编程客户端&#xff08;java客户端&#xff09; redis可视化工具和客户端 1、 Jedis快速入门 Jedis的官网地址&#xff1a; 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、机场协同决策支持系统是什么&#xff1f; 2、发展历程 3、机场协同决策参与方 4、相关定义 二、机场协同决策ACDM的建设目标 &#xff08;一&#xff09;机场协同决策支持系统的宏观目标 1、实现运行数据共享和前序航班信息透明化 2、实现地面资源…...

GO设计模式——17、解释器模式(行为型)

目录 解释器模式&#xff08;Interpreter Pattern&#xff09; 解释器模式的核心角色&#xff1a; 优缺点 代码实现 解释器模式&#xff08;Interpreter Pattern&#xff09; 解释器模式&#xff08;Interpreter Pattern&#xff09;提供了评估语言的语法或表达式的方式&am…...

基于SSM的大学生兼职平台的设计与实现

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SSM的大学生兼职平台的设计与实现,j…...

Ignite内存配置

配置内存 #1.内存架构 #1.1.概述 Ignite内存架构通过可以同时在内存和磁盘上存储和处理数据及索引&#xff0c;得到了支持磁盘持久化的内存级性能。 多层存储的运行方式类似于操作系统&#xff08;例如Linux&#xff09;的虚拟内存。但是这两种类型架构之间的主要区别是&…...

前端基础vue路由懒加载

为什么用路由懒加载 首屏组件加载速度更快一些&#xff0c;解决白屏问题&#xff0c;常言道需要就加载&#xff0c;不需要就先放一边 懒加载定义 懒加载简单来说就是延迟加载或按需加载&#xff0c;即在需要的时候的时候进行加载。 使用 常用的懒加载方式有两种&#xff1a;即…...

C++系列第九篇 数据类型下篇 - 复合类型(指针高级应用)

系列文章 C 系列 前篇 为什么学习C 及学习计划-CSDN博客 C 系列 第一篇 开发环境搭建&#xff08;WSL 方向&#xff09;-CSDN博客 C 系列 第二篇 你真的了解C吗&#xff1f;本篇带你走进C的世界-CSDN博客 C 系列 第三篇 C程序的基本结构-CSDN博客 C 系列 第四篇 C 数据类型…...

python三大开发框架django、 flask 和 fastapi 对比

本文讲述了什么启发了 FastAPI 的诞生&#xff0c;它与其他替代框架的对比&#xff0c;以及从中汲取的经验。 如果不是基于前人的成果&#xff0c;FastAPI 将不会存在。在 FastAPI 之前&#xff0c;前人已经创建了许多工具 。 几年来&#xff0c;我一直在避免创建新框架。首先&…...

html基础2

视频video <video src"视频的路径"controls"控制播放、暂停、音量等"autoplay"自动播放"loop"循环播放"width"视频播放器的宽度"height"视频播放器的高度"> </video>还有做浏览器兼容的方式&#xf…...

基于博弈树的开源五子棋AI教程[5 启发式搜索]

文章目录 1 最大化攻击者/最小化防守者排序2 置换表启发3 杀手表启发4 历史表启发历史表以及杀手表的维护初始化追加杀手表项清空杀手表 启发式搜索的姿势千奇百怪&#xff0c;本文只讨论一下几种 //搜索空间 #define Search_Space_MVA 0 //最优价值攻击者[分数最大] #d…...

JavaScript原型,原型链 ? 有什么特点?

一、原型 JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象 当试图访问一个对象的属性时&#xff0c;它不仅仅在该对象上搜寻&#xff0c;还会搜寻该对象的原型&#xff0c;以及该对象的原型的原型&#xff0c;依次层层向上搜索&#xff0c;直到找到一个…...

Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题

Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时&#xff0c;动态变化时无法及时刷新更新适配界面的问题 目录 Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时&#xff0c;动态变化时无法及时刷新更新适配界面的问题 一、简单介绍…...

linux 中 C++的环境搭建以及测试工具的简单介绍

文章目录 makefleCMakegdb调试 与 coredumpValgrind 内存检测gtest 单元测试 makefile 介绍 安装 : sudo apt install make makefile 的规则: 举例说明 包括&#xff1a;目标文件 、 依赖文件 、 生成规则 使用 &#xff1a; make make clean CMake : CMake是一个…...

448. 找到所有数组中消失的数字

找到所有数组中消失的数字 描述 : 给你一个含 n 个整数的数组 nums &#xff0c;其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字&#xff0c;并以数组的形式返回结果。 题目 : LeetCode 448. 找到所有数组中消失的数字: 448. 找…...

为何在下雪天它“失宠”了,传统雪地靴居然不适合下雪穿

随着冬至的到来&#xff0c;一年之中最寒冷的“三九天”正式拉开序幕。近期各地纷纷下起了大雪&#xff0c;在这场大雪中雪地靴似乎“失宠”了。在社交媒体上&#xff0c;有网友吐槽“雪地靴根本不能下雪穿”&#xff0c;后面有不少网友纷纷分享了自己在雪地靴上尴尬的经历&…...

第34节: Vue3 调用内联处理程序中的方法

在UniApp中使用Vue3框架时&#xff0c;你可以在模板中直接调用组件内联处理程序中的方法。以下是一个示例&#xff1a; <template> <view> <button click"handleClick">Click me</button> <p>{{ message }}</p> </view&…...

JavaScript--明明白白Promise (Park One)

明明白白Promise (Park One) Promise是一种用于处理异步操作的特殊对象。它代表了一个尚未完成但最终会完成的操作&#xff0c;并可以在操作完成后返回结果或错误。 Promise有三种状态&#xff1a;pending&#xff08;进行中&#xff09;、fulfilled&#xff08;已完成&#…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...