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

vue3+ts的几个bug调试

由于编译问题,把几个type检查给关闭了,否则错误太多。

1)第一个检查出的问题,拼写错误数组的length,写成了lengh。

2)数组的对象引用。

torStatus = Array(8).fill({ ...defaultStatus }) as TorStatus[];

这种方式会创建一个长度为 8 的数组 torStatus,其中每个元素都引用了同一个对象,即 defaultStatus 对象的副本。这里的 { ...defaultStatus } 会生成一个新的对象副本,但在 fill 操作中,所有 8 个元素将引用这个同一个新对象。

因此,修改 torStatus[0] 会影响数组中的其他元素,因为它们实际上引用的是同一个对象(即数组中所有的对象是同一个内存地址)

必须改成

torStatus = Array(8).fill(null).map(() => ({ ...defaultStatus })) as TorStatus[];

这样,map() 会确保为每个数组元素生成一个新的对象副本,因此修改 cannyEtorStatus[0] 时,不会影响到数组中的其他元素。

3)UI中值的调试方法,

一般是用console.log打印,

还可以直接在UI中显示

调试方法直接在ui中显示值
<div>{{record.FloorNum + "," + (Number(column.dataIndex.slice(-2)) - 1) + "," + record.torStatus[Number(column.dataIndex.slice(-2)) - 1].incar }}
</div>

4)用watch监控变量时,一个变量是有效的,另一个变量更新后属性不怎么变化。

改成一样的,添加 deep: true 后生效。

watch(() => props.cannyEtorGroupStatus,(newStatus, oldStatus) => {console.log("in watch props.torGroupStatus");if (newStatus != undefined) {console.log("in watch props.torGroupStatus,if (newStatus != undefined)");updateDataSourceByEtorGroupStatus(newStatus);}},{ immediate: true, deep: true }  // 初始化时也会调用一次
);

因为watch 只会监听 浅层 数据变化(即监听对象或数组的引用变化),而不会对对象内部的属性变化进行监听。

当你在 watch 中添加 deep: true 选项时,表示你希望对 深层次的数据变化 进行监听。也就是说,它会递归地监控对象或数组的每一个属性或者元素的变化,无论是对象的某个属性,还是数组的某个元素发生变化,都会触发回调函数。

  • deep: true 用于深度监听对象或数组的内部变化。
  • 它会递归地监视对象或数组的每个属性或元素,无论其内容如何改变。
  • 使用时要小心性能开销,尤其是在数据结构较大的情况下

5)模拟dtu用落地包数据本地测试

相关文章:

vue3+ts的几个bug调试

由于编译问题&#xff0c;把几个type检查给关闭了&#xff0c;否则错误太多。 1&#xff09;第一个检查出的问题&#xff0c;拼写错误数组的length&#xff0c;写成了lengh。 2&#xff09;数组的对象引用。 torStatus Array(8).fill({ ...defaultStatus }) as TorStatus[]…...

DVWA靶场CSRF漏洞通关教程及源码审计

目录标题 CSRFlow源码审计 medium源码审计 high源码审计 impossible源码审计 CSRF low 先修改密码 看到地址栏 复制在另一个网页打开 成功登录 源码审计 没有任何过滤措施&#xff0c;很危险&#xff0c;并且采用了不安全的md5加密 <?phpif( isset( $_GET[ Change ] )…...

前端开发:HTML常见标签

1.注释标签 注释不会显示在界面上 . 目的是提高代码的可读性 . ctrl / 快捷键可以快速进行注释 / 取消注释 . <!-- 我是注释 --> 2.标题标签 有六个 , 从 h1 - h6. 数字越大 , 则字体越小 <h1> hello </h1> //我们所写的csdn的格式中的标题一…...

【机器学习】主动学习-增加标签的操作方法-样本池采样(Pool-Based Sampling)

Pool-Based Sampling Pool-based sampling 是一种主动学习&#xff08;Active Learning&#xff09;方法&#xff0c;与流式选择性采样不同&#xff0c;它假设有一个预先定义的未标注样本池&#xff0c;算法从中选择最有价值的样本进行标注&#xff0c;以提升模型的性能。这种…...

【Rust自学】11.9. 单元测试

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.9.1. 测试的分类 Rust把测试分为两类&#xff0c;一个是单元测试&#xff0c;一个是集成测试。 单元测试比较小也比较专注&#xff…...

深入理解Web存储机制:Cookie、SessionStorage与LocalStorage的区别

文章目录 前言一、Cookie简介二、SessionStorage简介三、LocalStorage简介四、三者之间的比较五、最佳实践建议结语 前言 随着Web应用程序变得越来越复杂&#xff0c;开发者需要更有效的办法来管理客户端数据。Cookie、SessionStorage和LocalStorage是三种常用的Web存储机制&a…...

SpringBoot之BeanDefinitionLoader类源码学习

该类的作用 Spring 框架中用于加载和解析 Bean 定义的工具类。它主要用于从不同的资源&#xff08;如 XML 文件、注解、Java 配置类等&#xff09;中读取 Bean 定义&#xff0c;并将这些定义注册到 Spring 的 BeanFactory 或 ApplicationContext 中 基本属性 //指定的资源pri…...

【芯片封测学习专栏 -- 2D | 2.5D | 3D 封装的区别和联系】

请阅读【嵌入式开发学习必备专栏 Cache | MMU | AMBA BUS | CoreSight | Trace32 | CoreLink | ARM GCC | CSH】 文章目录 Overview线键合&#xff08;wire-bonding&#xff09;封装FOWLP2D封装2.5D 封装硅通孔(TSV)硅中介层无TSV的2.5D 3D封装 Overview 我们先要了解一下&…...

从硬件设备看Linux

一、介绍 DM3730通过各种连接方式连接了各种设备&#xff0c;输入输出设备根据不同的类型大体可 以分为电源管理、用户输人、显示输出、图像采集、存储以及无线设备等。我们可以将DM 3730与这些设备的数据接口分为总线和单一的数据接口总线。总线的显著特点是单个总线上可以连…...

open3d+opencv实现矩形框裁剪点云操作(C++)

&#x1f451;主页&#xff1a;吾名招财 &#x1f453;简介&#xff1a;工科学硕&#xff0c;研究方向机器视觉&#xff0c;爱好较广泛… ​&#x1f4ab;签名&#xff1a;面朝大海&#xff0c;春暖花开&#xff01; open3dopencv实现矩形框裁剪点云操作&#xff08;C&#xff…...

git 本地操作

一、git.vscode 撤回本地提交 要在Git中撤销本地的最后一次提交&#xff0c;可以使用以下命令&#xff1a; git reset --soft HEAD^ 这将会撤销最后一次的提交&#xff0c;但是保留工作区以及暂存区的内容&#xff0c;方便重新提交。 如果你想完全撤销最后一次提交&#xf…...

PL/SQL语言的文件操作

PL/SQL语言的文件操作 PL/SQL&#xff08;Procedural Language/SQL&#xff09;是Oracle公司开发的一种过程化扩展SQL的语言&#xff0c;广泛应用于Oracle数据库的开发和管理。PL/SQL不仅支持SQL指令&#xff0c;还支持过程化编程&#xff0c;例如条件控制、循环控制、异常处理…...

linux lsof 和 fuser命令介绍

lsof 和 fuser 是两个在 Linux 系统中用于查看文件占用情况的重要工具。它们都可以用于查看哪些进程正在使用某些文件、设备或端口。下面是这两个命令的介绍、举例和背景。 lsof (List Open Files) 命令介绍: lsof 命令用于列出当前系统中所有打开的文件以及与之相关的进程。它…...

[Python学习日记-76] 网络编程中的 socket 开发 —— 介绍、工作流程、socket 模块用法和函数介绍

[Python学习日记-76] 网络编程中的 socket 开发 —— 介绍、工作流程、socket 模块用法和函数介绍 简介 socket 介绍 socket 的工作流程及用法 简介 前面在[Python学习日记-75] 计算机基础与网络当中介绍了一大堆基础知识之后我们终于开始进入到网络编程的开发阶段了&#x…...

vue(七) vue进阶

目录 第一课&#xff1a;Vue方法、计算机属性及侦听器 一、数组变化侦测 方法1&#xff1a;变更方法 方法2&#xff1a;替换一个数组 例子&#xff1a;小Demo:合并两个数组 二、计算属性 1.基础&#xff08;不推荐&#xff09; 2.使用计算属性来完成案例 3.使用函数的方…...

[Transformer] The Structure of GPT, Generative Pretrained Transformer

The Structure of Generative Pretrained Transformer Reference: The Transformer architecture of GPT models How GPT Models Work...

Django Admin 自定义操作封装

1. 为什么需要封装? 在Django开发中,我们经常需要在Admin界面添加自定义操作按钮,以便管理员执行特定的任务。通过封装,我们可以: 减少重复代码统一管理自定义操作的逻辑提高代码的可维护性和可扩展性 © ivwdcwso (ID: u012172506)2. CustomActionMixin 的实现 让我…...

http和https有哪些不同

http和https有哪些不同 1.数据传输的安全性&#xff1a;http非加密&#xff0c;https加密 2.端口号&#xff1a;http默认80端口&#xff0c;https默认443端口 3.性能&#xff1a;http基于tcp三次握手建立连接&#xff0c;https在tcp三次握手后还有TLS协议的四次握手确认加密…...

PL/SQL语言的数据库交互

PL/SQL语言的数据库交互 引言 在当今的信息化时代&#xff0c;数据库管理系统&#xff08;DBMS&#xff09;在各行各业中扮演着至关重要的角色。为了高效地与数据库进行交互&#xff0c;许多程序员、数据库管理员和系统分析师选择使用PL/SQL&#xff08;Procedural Language/…...

亿道三防丨三防笔记本是什么意思?和普通笔记本的优势在哪里?

三防笔记本是什么意思&#xff1f;和普通笔记本的优势在哪里&#xff1f; 在现代社会中&#xff0c;笔记本电脑已经成为人们工作和生活中不可或缺的一部分。然而&#xff0c;在一些特殊行业或环境中&#xff0c;普通笔记本电脑由于其脆弱性和对环境条件的敏感性&#xff0c;往…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...