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

Vue 2 动态组件和异步组件

news 2026/3/28 9:13:29

先阅读 【Vue 2 组件基础】中的初步了解动态组件。

动态组件与keep-alive

我们知道动态组件使用is属性和component标签结合来切换不同组件。

下面给出一个示例：

<!DOCTYPE html>
<html><head><title>Vue 动态组件</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><!--  tab 标签页 --><div><button @click="tab = 'home'">首页</button><button @click="tab = 'posts'">文章</button></div>父组件count: {{count}}<!--  动态组件 --><component :is="tab" @increment="count=$event"></component></div><script>//  注册组件Vue.component('home', {data: function () {return {count: 0}},template: `<div><div>首页内容</div><div>子组件count: {{count}}</div><button @click="count++;$emit('increment', count)">点击了{{count}}次</button></div>`,});Vue.component('posts', {template: '<div>文章内容</div>'});var vm = new Vue({el: '#app',data: {tab: 'home',count: 0},});</script>
</body></html>
<script>

在这里插入图片描述

看代码可以知道父组件的count会在子组件count更新后变为子组件的count值。但我们切换组件后再切换回来，会发现父组件count没变，子组件count变为初始值。这是因为，每次切换组件都会创建当前组件的新实例。

那怎么保存先前组件的状态呢？

Vue提供了keep-alive组件。我们使用该元素将要缓存的组件包裹起来。让我们看看效果：

<keep-alive><component :is="tab" @increment="count=$event"></component>
</keep-alive>

在这里插入图片描述

成功解决问题！

了解更多keep-alive组件的细节。

异步组件

异步组件是一种加载组件的方式，它允许我们将组件的加载推迟到需要时再进行，以提高应用程序的性能和加载速度。

我们可以通过不同的方式使用异步组件。

1.工厂函数

使用Vue.component方法来定义一个异步组件工厂函数：

Vue.component('async-component',function(resolve,reject){//模拟异步加载，延迟一段时间后解析组件setTimeout(function(){resolve({template:'<div><h2>Async Component Content</h2></div>'})},1000)
})

使用Vue.component方法结合webpack的code-splitting来定义一个异步组件工厂函数：

Vue.component('async-component',function(resolve,reject){//这个特殊的require语法会告诉webpack自动将编译后的异步组件拆分成不同的块require('./AsyncComponent.vue',resolve)
})

在上面代码中，async-component是你定义异步组件的名字，后面的工厂函数有两个参数：resolve和reject。resolve是一个函数，异步加载成功时会调用它。reject则是在异步加载失败时调用。

2.Vue.component+动态导入+webpack 2的代码分割+ES2015的模块语法

Vue.component(`async-webpack-example`,()=>import('./my-async-component')
);

()=>import('./my-async-component')返回一个Promise，Vue会根据Promise的状态来自动处理异步加载和渲染的过程。

3.局部注册+动态导入

new Vue({components:{'my-component':()=>import('./my-async-component')}
})

处理加载状态

异步组件工厂函数可以返回一个对象，该对象包含有关异步组件加载、加载中、加载失败等情况的配置信息，这种方式允许你更加精细地控制异步组件地加载和渲染过程。下面是这种格式的异步组件配置对象的详细解释：

const AsyncComponent=()=({//需要加载的组件component:import('./MyComponent.vue'),//异步加载时使用的组件loading:LoadingComponent,//加载失败时使用的组件error:ErrorComponent,//展示加载时组件的延迟时间，默认值是200（毫秒）delay:200,// 如果提供了超时时间且组件加载也超时了，// 则使用加载失败时使用的组件。默认值是：`Infinity`，即没有超时限制timeout: 3000
})

相关文章：

Vue 2 动态组件和异步组件

先阅读 【Vue 2 组件基础】中的初步了解动态组件。 动态组件与keep-alive 我们知道动态组件使用is属性和component标签结合来切换不同组件。 下面给出一个示例&#xff1a; <!DOCTYPE html> <html><head><title>Vue 动态组件</title><scri…...

编程日记 2023/8/19 14:31:30

MongoDB升级经历（4.0.23至5.0.19）

MongoDB从4.0.23至5.0.19升级经历 引子&#xff1a;为了解决MongoDB的两个漏洞决定把MongoDB升级至最新版本&#xff0c;期间也踩了不少坑&#xff0c;在这里分享出来供大家学习与避坑~ 1、MongoDB的两个漏洞 漏洞1&#xff1a;MongoDB Server 安全漏洞(CVE-2021-20330) 漏洞2…...

编程日记 2023/8/19 14:30:29

iPhone上的个人热点丢失了怎么办？如何修复iPhone上不见的个人热点？

个人热点功能可将我们的iPhone手机转变为 Wi-Fi 热点&#xff0c;有了Wi-Fi 热点后就可以与附近的其他设备共享其互联网连接。 一般情况下&#xff0c;个人热点打开就可以使用&#xff0c;但也有部分用户在升级系统或越狱后发现 iPhone 的个人热点消失了。 iPhone上的个人热点…...

编程日记 2023/8/19 14:29:27

AI 媒人：为什么图形神经网络比 MLP 更好？

一、说明 G拉夫神经网络&#xff08;GNN&#xff09;&#xff01;想象他们是人工智能世界的媒人&#xff0c;通过探索他们的联系&#xff0c;不知疲倦地帮助数据点找到朋友和人气。数字派对上的终极僚机。 现在&#xff0c;为什么这些GNN如此重要&#xff0c;你问&#xff1f;好…...

编程日记 2023/8/19 14:28:25

信息学奥赛一本通 1984：【19CSPJ普及组】纪念品 | 洛谷 P5662 [CSP-J2019] 纪念品

【题目链接】 ybt 1984&#xff1a;【19CSPJ普及组】纪念品 洛谷 P5662 [CSP-J2019] 纪念品 【题目考点】 1. 动态规划&#xff1a;完全背包 【解题思路】 由于小伟每天都可以买卖物品无限次&#xff0c;我们可以假想每天开始时&#xff0c;他把所有的商品都卖出&#xff…...

编程日记 2023/8/19 14:27:24

JVM——JVM参数指南

文章目录 1.概述2.堆内存相关2.1.显式指定堆内存–Xms和-Xmx2.2.显式新生代内存(Young Ceneration)2.3.显示指定永久代/元空间的大小 3.垃圾收集相关3.1.垃圾回收器3.2.GC记录 1.概述 在本篇文章中&#xff0c;你将掌握最常用的 JVM 参数配置。如果对于下面提到了一些概念比如…...

编程日记 2023/8/19 14:26:22

马上七夕到了，用各种编程语言实现10种浪漫表白方式

目录 1. 直接表白&#xff1a;2. 七夕节表白&#xff1a;3. 猜心游戏&#xff1a;4. 浪漫诗句&#xff1a;5. 爱的方程式&#xff1a;6. 爱心Python&#xff1a;7. 心形图案JavaScript 代码&#xff1a;8. 心形并显示表白信息HTML 页面&#xff1a;9. Java七夕快乐&#xff1a;…...

编程日记 2023/8/19 14:25:21

Spring Clould 注册中心 - Eureka，Nacos

视频地址&#xff1a;微服务&#xff08;SpringCloudRabbitMQDockerRedis搜索分布式&#xff09; Eureka 微服务技术栈导学&#xff08;P1、P2&#xff09; 微服务涉及的的知识 认识微服务-服务架构演变&#xff08;P3、P4&#xff09; 总结&#xff1a; 认识微服务-微服务技…...

编程日记 2023/8/19 14:24:20

使用appuploader工具发布证书和描述性文件教程

使用APPuploader工具发布证书和描述性文件教程 之前用AppCan平台开发了一个应用&#xff0c;平台可以同时生成安卓版和苹果版&#xff0c;想着也把这应用上架到App Store试试&#xff0c;于是找同学借了个苹果开发者账号&#xff0c;但没那么简单&#xff0c;还要用到Mac电脑的…...

编程日记 2023/8/19 14:23:19

【面试八股文】每日一题：谈谈你对IO的理解

谈谈你对IO的理解 每日一题-Java核心-谈谈你对对IO的理解【面试八股文】 1.Java基础知识 Java IO&#xff08;Input/Output&#xff09;是Java编程语言中用于处理输入和输出的一组类和接口。它提供了一种在Java程序中读取和写入数据的方法。 Java IO包括两个主要的部分&#x…...

编程日记 2023/8/19 14:22:17

200. 岛屿数量

思路&#xff1a;遍历整个矩阵&#xff0c;对每个格子执行以下操作&#xff1a; 如果格子是陆地&#xff08;‘1’&#xff09;&#xff0c;则将其标记为已访问&#xff08;‘0’&#xff09;&#xff0c;并从当前位置开始进行深度优先搜索&#xff0c;将与当前格子相邻的陆地都…...

编程日记 2023/8/19 14:21:14

【LeetCode】581.最短无序连续子数组

题目 给你一个整数数组 nums &#xff0c;你需要找出一个 连续子数组 &#xff0c;如果对这个子数组进行升序排序&#xff0c;那么整个数组都会变为升序排序。 请你找出符合题意的 最短 子数组&#xff0c;并输出它的长度。 示例 1&#xff1a; 输入&#xff1a;nums [2,6…...

编程日记 2023/8/19 14:20:12

曲面（弧面、柱面）展平（拉直）瓶子标签识别ocr

瓶子或者柱面在做字符识别的时候由于变形&#xff0c;识别效果是很不好的 或者是检测瓶子表面缺陷的时候效果也没有展平的好 下面介绍两个项目&#xff0c;关于曲面&#xff08;弧面、柱面&#xff09;展平&#xff08;拉直&#xff09; 项目一&#xff1a;通过识别曲面的6个点…...

编程日记 2023/8/19 14:19:11

知识继承概述

文章目录 知识继承第一章 知识继承概述1.背景介绍第一页 背景第二页 大模型训练成本示例第三页 知识继承的动机 2.知识继承的主要方法 第二章 基于知识蒸馏的知识继承预页 方法概览 1.知识蒸馏概述第一页 知识蒸馏概述第二页 知识蒸馏第三页 什么是知识第四页 知识蒸馏的核心目…...

编程日记 2023/8/19 14:18:10

深度剖析数据在内存中的存储

目录 一、数据类型介绍 类型的基本归类 1.整形家族 2.浮点数家族 3.构造类型 &#xff08;自定义类型&#xff09; 4.指针类型 5.空类型 二、整形在内存中的存储 1.原码、反码、补码 1.1原码 1.2反码 1.3补码 1.4计算规则 2 .大小端介绍 三、浮点型在内存中的存…...

编程日记 2023/8/19 14:17:09

【ARM Linux 系统稳定性分析入门及渐进10 -- GDB 初始化脚本介绍及使用】

文章目录 gdb 脚本介绍gdb 初始化脚本使用启动 gdb 的时候自动执行脚本gdb运行期间执行命令脚本 gdb 脚本介绍 GDB脚本是一种使用GDB命令语言编写的脚本&#xff0c;可以用来自动化一些常见的调试任务。这些脚本可以直接在GDB中运行&#xff0c;也可以通过GDB的-x参数或source…...

编程日记 2023/8/19 14:16:08

AQS源码解读

文章目录 前言一、AQS是什么&#xff1f;二、解读重点属性statehead、tail 同步变量竞争acquire 同步变量释放 总结 前言 AQS是AbstractQueuedSynchronizer的缩写&#xff0c;也是大神Doug Lea的得意之作。今天我们来进行尽量简化的分析和理解性的代码阅读。 一、AQS是什么&am…...

编程日记 2023/8/19 14:15:06

QT实现天气预报

1. MainWindow类设计的成员变量和方法 public: MainWindow(QWidget* parent nullptr); ~MainWindow(); protected: 形成文本菜单来用来右键关闭窗口 void contextMenuEvent(QContextMenuEvent* event); 鼠标被点击之后此事件被调用 void mousePressEvent(QMouseEv…...

编程日记 2023/8/19 14:14:05

【马蹄集】第二十三周——进位制专题

进位制专题 目录 MT2186 二进制&#xff1f;不同&#xff01;MT2187 excel的烦恼MT2188 单条件和MT2189 三进制计算机1MT2190 三进制计算机2 MT2186 二进制&#xff1f;不同&#xff01; 难度&#xff1a;黄金    时间限制&#xff1a;1秒    占用内存&#xff1a;128M 题目…...

编程日记 2023/8/19 14:13:04

[足式机器人]Part3 变分法Ch01-1 数学预备知识——【读书笔记】

本文仅供学习使用 本文参考&#xff1a; 《变分法基础-第三版》老大中 《变分学讲义》张恭庆 《Calculus of Variations of Optimal Control Theory》-变分法和最优控制论-Daneil Liberzon Ch01-1 数学基础-预备知识1 1 数学基础-预备知识1.1 泰勒公式1.1.1 一元函数的泰勒公式…...

编程日记 2023/8/19 14:12:02

IT6500电源蜂鸣器太吵？教你用Python远程静音并实现电压步进扫描

IT6500电源蜂鸣器静音与电压步进扫描的Python实战指南 深夜的实验室里&#xff0c;IT6500电源的蜂鸣器突然响起&#xff0c;刺耳的"哔哔"声打破了宁静&#xff0c;这种场景对于电子工程师来说再熟悉不过。本文将带你用Python彻底解决这个恼人的问题&#xff0c;同时实…...

编程新知 2026/3/28 7:08:55

从‘社交网络’到‘路径规划’：邻接表DFS在5个真实场景中的实战应用

从‘社交网络’到‘路径规划’&#xff1a;邻接表DFS在5个真实场景中的实战应用 邻接表和深度优先搜索&#xff08;DFS&#xff09;这对黄金组合&#xff0c;远不止是算法教材里的抽象概念。当它们走出理论课本&#xff0c;进入真实世界的复杂系统时&#xff0c;展现出的问题解…...

编程新知 2026/3/28 6:38:48

4个让OneNote效率倍增的开源效率工具：Markdown全功能增强方案

4个让OneNote效率倍增的开源效率工具&#xff1a;Markdown全功能增强方案 【免费下载链接】NoteWidget Markdown add-in for Microsoft Office OneNote 项目地址: https://gitcode.com/gh_mirrors/no/NoteWidget 一、问题发现&#xff1a;OneNote的专业创作短板与解决方…...

编程新知 2026/3/28 6:20:36

EVA-01保姆级教程：Qwen2.5-VL-7B多模态大模型在EVA-01中的本地化安全部署

EVA-01保姆级教程&#xff1a;Qwen2.5-VL-7B多模态大模型在EVA-01中的本地化安全部署 1. 引言&#xff1a;欢迎来到NERV指挥中心 想象一下&#xff0c;你面前有一个能看懂图片、理解图表、甚至能和你讨论图片里发生了什么的智能助手。现在&#xff0c;我们把这个助手装进了一…...

编程新知 2026/3/28 5:34:05

在六亩半，春天不是日历上的数字，而是泥土间的青草香

当城市里的春天还停留在气温起伏的天气预报里&#xff0c;六亩半手作文创园的春意&#xff0c;早已从土地深处探出头来。那是荠菜嫩芽拱开泥土的力道&#xff0c;是柳条抽出新绿的柔软&#xff0c;是孩子们蹲在田埂上、指尖沾满青草汁液的鲜活记忆。在这里&#xff0c;春天不是…...

编程新知 2026/3/28 4:36:01

QLVideo：macOS视频管理效率提升的完整解决方案

QLVideo&#xff1a;macOS视频管理效率提升的完整解决方案 【免费下载链接】QuickLookVideo This package allows macOS Finder to display thumbnails, static QuickLook previews, cover art and metadata for most types of video files. 项目地址: https://gitcode.com/g…...

编程新知 2026/3/28 4:01:49

告别黑盒调试：为VS2022和Halcon HImage定制一个带暗色主题的视觉化调试器

为VS2022和Halcon HImage打造沉浸式暗色调试器&#xff1a;从UI优化到高效开发实践 在计算机视觉开发领域&#xff0c;Halcon凭借其强大的图像处理能力成为工业检测、医疗影像等场景的首选工具。然而&#xff0c;长时间面对传统调试界面容易导致视觉疲劳&#xff0c;影响开发效…...

编程新知 2026/3/28 3:33:29

（宏）Word题注自动化：从“图一-1”到“图1-1”的VBA实现与高效复用

1. 为什么需要题注自动化&#xff1f; 写论文或者技术文档的朋友肯定遇到过这样的烦恼&#xff1a;每次插入图片后&#xff0c;都要手动输入"图1-1"、"图1-2"这样的题注。更麻烦的是&#xff0c;如果你的章节标题用的是中文数字&#xff08;比如"第一…...

编程新知 2026/3/28 3:05:12

Zotero终极指南：高效文献管理的开源解决方案

Zotero终极指南&#xff1a;高效文献管理的开源解决方案 【免费下载链接】zotero Zotero is a free, easy-to-use tool to help you collect, organize, annotate, cite, and share your research sources. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero Zotero是…...

编程新知 2026/3/28 2:14:50

IntelliJ Conf：JetBrains Koog Java原生AI Agent框架实战

文章目录前言&#xff1a;Java程序员的"Agent焦虑"终于有解了认识Koog&#xff1a;不是又一个LangChain的Java版环境准备&#xff1a;5分钟让项目跑起来实战&#xff1a;从Hello World到智能客服第一步&#xff1a;定义工具&#xff08;Tool&#xff09;第二步&#…...

编程新知 2026/3/28 0:53:34