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

Vue 组件_动态组件+keep-alive

文章目录

  • Vue 动态组件 + keep-alive
    • 知识点讲解
    • 业务场景实例
    • 代码实现
    • keep-alive

Vue 动态组件 + keep-alive

知识点讲解

通过 Vue 的 <component> 组件和特殊的 is 属性实现的。

<!-- curentComponent 改变时组件也改变 -->
<component :is="componentMap[curentComponent]""></component>

被传给 :is 的值可以是以下几种:

  • 被注册的组件名
  • 导入的组件对象

除了以上两种,也可以使用 is 属性创建一般的 HTML 元素,只要将 is 属性的值设置为任意 HTML 元素标签名,比如 ‘div’、‘span’、‘a’ 等,Vue 将会根据这个值创建相应的元素。

业务场景实例

访问某系统,跳转系统登录页,左侧展示图片和公司宣传语,右侧展示登录相关信息。左侧内容固定不变,针对不同情况右侧展示的登录信息不同,这种情况右侧区域可以采用动态组件实现不同内容的切换。
业务逻辑流转如下:

  1. 访问系统,展示【登陆账户】,输入手机号,点击登录/注册按钮。
  2. 后端验证该手机号是否注册,如果暂未注册,展示【输入验证码】。
  3. 验证码校验通过,展示【请设置密码】。
  4. 密码确认之后,展示【登录账户】。
  5. 点击重置密码,展示【设置新密码】。

当然除此场景以外,tab 的切换场景也非常常见。

在这里插入图片描述

代码实现

代码涉及知识点 Typescript 工具类型 Record<Keys, Type>

import Login from './components/Login.vue'
import Code from './components/VerifyCode.vue'
import SetPassword from './components/SetPassword.vue'
import Password from './components/Password.vue'
import SetNewPassword from './components/SetNewPassword.vue'const curentComponent = ref<string>('Login')const componentMap = shallowRef<Record<string, Component>>({Login,Password,Code,SetPassword,SetNewPassword
})// 不同的时机修改 curentComponent.value 

❗❗❗ 注意点
Vue2 是通过组件名称切换的,Vue3 是通过组件实例切换的。
如果直接把组件实例放到 reactive 中代理,Vue 会发出警告。告知我们可以通过 shallowRef 或者 markRaw 跳过 proxy 代理。因为组件实例进行响应式代理毫无意义,且浪费性能。

在这里插入图片描述

keep-alive

本节内容涉及 Vue Devtools 插件下载、安装和应用
当使用 <component :is=“…”> 在多个组件间作切换时,被切换掉的组件会被卸载。我们可以通过 <keep-alive> 组件强制被切换掉的组件仍然保持“存活”的状态。

当使用 <keep-alive> 缓存了组件而不是频繁创建和销毁(开销大)。

有三个属性:

  • include 组件名只要匹配添加的名称表示会被缓存。

  • exclude 组件名匹配添加的名称表示不会被缓存。

  • max 设置最多缓存实例数。一般用于页面级别缓存。

    <!-- include/exclude 支持以下格式设置 -->
    <!-- 以英文逗号分隔的字符串 -->
    <KeepAlive include="a,b"><component :is="view" />
    </KeepAlive><!-- 正则表达式 (需使用 `v-bind`) -->
    <KeepAlive :include="/a|b/"><component :is="view" />
    </KeepAlive><!-- 数组 (需使用 `v-bind`) -->
    <KeepAlive :include="['a', 'b']"><component :is="view" />
    </KeepAlive><!-- 设置最大缓存实例数 -->
    <KeepAlive :max="10"><component :is="activeComponent" />
    </KeepAlive>
    

涉及两个生命周期:

  • deactived:组件失效时触发。一般用于做一些未存储数据的提示。
  • actived:当组件被激活时。一般用于做一些页面初始化的数据查询。

除了配合 <component :is=“…”> 使组件保持存活状态,还可以配合路由 <router-view> 使用可以使页面保留状态,避免重复渲染。

通过 Vue devtools 比较使用 <keep-alive> 缓存和不使用 <keep-alive> 缓存时组件的两种存在状态。

未缓存组件
在这里插入图片描述
缓存组件

访问过的三个组件都会存在,只是分为激活状态和失活状态,当重新访问组件进入激活状态时触发 actived 钩子函数,失活的触发 deactived 钩子函数。在这里插入图片描述

相关文章:

Vue 组件_动态组件+keep-alive

文章目录 Vue 动态组件 keep-alive知识点讲解业务场景实例代码实现keep-alive Vue 动态组件 keep-alive 知识点讲解 通过 Vue 的 <component> 组件和特殊的 is 属性实现的。 <!-- curentComponent 改变时组件也改变 --> <component :is"componentMap[…...

深入理解Redis:多种操作方式详解

Redis&#xff08;Remote Dictionary Server&#xff09;是一款高性能的开源键值存储系统&#xff0c;广泛应用于缓存、会话管理、实时分析等领域。它支持多种数据结构&#xff0c;如字符串、哈希、列表、集合和有序集合等&#xff0c;提供了丰富的操作命令。本篇博客将详细介绍…...

stm32太阳能追光储能系统V2

大家好&#xff0c;我是 小杰学长 stm32太阳能追光储能系统V2. 增加了命令行交互和内置AT指令解析框架 &#xff08;就是可以用电脑串口发送at指令控制板子的所有功能&#xff09; 改动了spi 换成硬件 改动了硬件电源 增加了pcb原理图 附带上pcb源文件 增加了freertos 互斥锁…...

Docker笔记-解决非交互式运行python时print不输出的问题

换句话来说就是在docker中如何不会python的print 只需要在启动时&#xff0c;不让python缓冲其输出。 关键命令如下&#xff1a;PYTHONUNBUFFERED1 如下&#xff1a; docker run -e PYTHONUNBUFFERED1 <your_image> 下面解释下-e "-e"选项的全称是"…...

06- 数组的基础知识详细讲解

06- 数组的基础知识详细讲解 一、基本概念 一次性定义多个相同类型的变量&#xff0c;并且给它们分配一片连续的内存。 int arr[5];1.1 初始化 只有在定义的时候赋值&#xff0c;才可以称为初始化。数组只有在初始化的时候才可以统一赋值。 以下是一些示例规则&#xff1a; …...

CentOS6系统因目录有隐含i权限属性致下属文件无法删除的故障一例

CentOS6服务器在升级openssh时因系统目录权限异常&#xff08;有隐含i权限属性&#xff09;&#xff0c;下属文件无法删除&#xff0c;导致系统问题的故障一例。 一、问题现象 CentOS6在升级openssh时&#xff0c;提示如下问题&#xff1a; warning: /etc/ssh/sshd_config c…...

【视频转码】ZLMediaKit漏洞报告的问题

漏洞问题&#xff1a; 支持ss1 rc4密码套件(bar mitzvah) 漏洞级别&#xff1a; 中危 漏洞修复&#xff1a; 方法&#xff1a;避免使用RC4密码&#xff0c;参考代码如下&#xff1a; 修改文件位于&#xff1a;webrtc/DtlsTransport.cpp ret SSL_CTX_set_cipher_list(ssl…...

100道大模型面试八股文

算法暑期实习机会快结束了&#xff0c;校招大考即将来袭。 当前就业环境已不再是那个双向奔赴时代了。求职者在变多&#xff0c;岗位在变少&#xff0c;要求还更高了。 最近&#xff0c;我们陆续整理了很多大厂的面试题&#xff0c;帮助球友解惑答疑和职业规划&#xff0c;分…...

【ARM Cache 及 MMU 系列文章 6.2 -- ARMv8/v9 Cache 内部数据读取方法详细介绍】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 Direct access to internal memoryL1 cache encodingsL1 Cache Data 寄存器Cache 数据读取代码实现Direct access to internal memory 在ARMv8架构中,缓存(Cache)是用来加速数据访…...

使用Vue.js将form表单传递到后端

一.form表单 <form submit.prevent"submitForm"></form> form表单像这样写出来&#xff0c;然后把需要用户填写的内容写在form表单内。 二.表单内数据绑定 <div class"input-container"><div style"margin-left: 9px;"&…...

6、架构-服务端缓存

为系统引入缓存之前&#xff0c;第一件事情是确认系统是否真的需要缓 存。从开发角度来说&#xff0c;引入缓存会提 高系统复杂度&#xff0c;因为你要考虑缓存的失效、更新、一致性等问题&#xff1b;从运维角度来说&#xff0c;缓存会掩盖一些缺 陷&#xff0c;让问题在更久的…...

服务器遭遇UDP攻击时的应对与解决方案

UDP攻击作为分布式拒绝服务(DDoS)攻击的一种常见形式&#xff0c;通过发送大量的UDP数据包淹没目标服务器&#xff0c;导致网络拥塞、服务中断。本文旨在提供一套实用的策略与技术手段&#xff0c;帮助您识别、缓解乃至防御UDP攻击&#xff0c;确保服务器稳定运行。我们将探讨监…...

美团发布2024年一季度财报:营收733亿元,同比增长25%

6月6日&#xff0c;美团(股票代码:3690.HK)发布2024年第一季度业绩报告。受益于经济持续回暖和消费复苏&#xff0c;公司各项业务继续取得稳健增长&#xff0c;营收733亿元(人民币&#xff0c;下同)&#xff0c;同比增长25%。 财报显示&#xff0c;一季度&#xff0c;美团继续…...

sql注入-布尔盲注

布尔盲注&#xff08;Boolean Blind SQL Injection&#xff09;是一种SQL注入攻击技术&#xff0c;用于在无法直接获得查询结果的情况下推断数据库信息&#xff1b;它通过发送不同的SQL查询来观察应用程序的响应&#xff0c;进而判断查询的真假&#xff0c;并逐步推断出有用的信…...

docker-compose部署 kafka 3.7 集群(3台服务器)并启用账号密码认证

文章目录 1. 规划2. 服务部署2.1 kafka-012.2 kafka-022.3 kafka-032.4 启动服务 3. 测试3.1 kafkamap搭建&#xff08;测试工具&#xff09;3.2 测试 1. 规划 服务IPkafka-0110.10.xxx.199kafka-0210.10.xxx.198kafka-0310.10.xxx.197kafkamp10.10.xxx.199 2. 服务部署 2.1…...

LeetCode-704. 二分查找【数组 二分查找】

LeetCode-704. 二分查找【数组 二分查找】 题目描述&#xff1a;解题思路一&#xff1a;注意开区间和闭区间背诵版&#xff1a;解题思路三&#xff1a; 题目描述&#xff1a; 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xf…...

Rust 性能分析

都说Rust性能好,但是也得代码写得好,猜猜下面两个代码哪个快 . - 力扣&#xff08;LeetCode&#xff09; use std::collections::HashMap; use lazy_static::lazy_static;lazy_static! {static ref DIGIT: HashMap<char, usize> {let mut m HashMap::new();for c in …...

Gradle和Maven都是广泛使用的项目自动化构建工具

Gradle和Maven都是广泛使用的项目自动化构建工具&#xff0c;但它们在多个方面存在差异。以下是关于Gradle和Maven的详细对比&#xff1a; 一、构建脚本语言 Maven&#xff1a;使用XML作为构建脚本语言。XML的语法较为繁琐&#xff0c;不够灵活&#xff0c;对于复杂的构建逻辑…...

Seed-TTS语音编辑有多强?对比实测结果让你惊叹!

GLM-4-9B 开源系列模型 前言 就在最近&#xff0c;ByteDance的研究人员最近推出了一系列名为Seed-TTS的大规模自回归文本转语音(TTS)模型,能够合成几乎与人类语音无法区分的高质量语音。那么Seed-TTS的表现究竟有多强呢?让我们一起来感受下Seed-TTS带来的惊喜吧! 介绍Seed-TTS…...

Vue3——实现word,pdf上传之后,预览功能(实测有效)

vue-office/pdf - npm支持多种文件(**docx、excel、pdf**)预览的vue组件库&#xff0c;支持vue2/3。也支持非Vue框架的预览。. Latest version: 2.0.2, last published: a month ago. Start using vue-office/pdf in your project by running npm i vue-office/pdf. There are …...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

Python 高效图像帧提取与视频编码:实战指南

Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...

DAY 26 函数专题1

函数定义与参数知识点回顾&#xff1a;1. 函数的定义2. 变量作用域&#xff1a;局部变量和全局变量3. 函数的参数类型&#xff1a;位置参数、默认参数、不定参数4. 传递参数的手段&#xff1a;关键词参数5 题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一…...