Vue3，什么情况下数据会丢失响应式呢？
一、使用 reactive 定义的数据重新赋值
<template><h1>{{ foo.a }}</h1><h1>{{ bar.a }}</h1><button @click="handleClick">点我</button>
</template>
<script setup>
import { ref, reactive } from 'vue'let foo = ref({ a: 1, b: 2, c: 3 })
let bar= reactive({ a: 1, b: 2, c: 3 })const handleClick = () => {foo.value = {a: 11}bar= {a: 99}
}
</script>
原因： 为什么 ref 定义对象重新赋值后不会丢失响应式，而 reactive 会丢失响应式
结论：ref 定义对象重新赋值后不会丢失响应式，而 reactive 会丢失响应式。
二、响应式数据被解构赋值（大多是 props 中的数据被解构赋值）
<template><h1>{{ a.b.c }}</h1><h1 v-if="a.b.d">{{ a.b.d }}</h1><h1>{{ aa.bb }}</h1><h1>{{ aaa }}</h1>
</template>
<script setup>
import { ref, onMounted} from 'vue'
const obj = {a: {b: {c: 1}},aa: {bb: 11},aaa: 111
}
let testObj = ref(obj)
let { a, aa, aaa } = testObj.valueonMounted(() => {setTimeout(() => {a.b.c = 9a.b.d = 9aa.bb = 99aaa = 999}, 3000)
})
</script>
上列数据只有 aaa 丢失了响应式
原因：
我们知道解构赋值，区分原始类型的赋值，和引用类型的赋值，原始类型的赋值相当于按值传递，引用类型的值就相当于按引用传递
按值传递
// 假设a是个响应式对象a.b = 1// c 此时就是一个值跟当前的 a 已经不沾边了const c=a.b // 相当于 c = 1
你直接访问 c 就相当于直接访问这个值，也就绕过了 a 对象的 getter。所以最开始的例子中，aaa 失去了响应式
按引用传递
// 假设 a 是个响应式对象const a.b.c = 3// 当你访问a.b的时候就已经重新初始化响应式了，此时的 c 就已经是一个代理的对象const c=a.b
你直接访问 c 就相当于访问一个响应式对象，所以并不会失去响应式
为什么 a.b 是响应式的呢？
源码中 reactive 方法调用了 createReactiveObject 方法，createReactiveObject 方法中，有一个判断，来检查数据是否是响应式的
// target already has corresponding Proxyconst existingProxy = proxyMap.get(target);if (existingProxy) {return existingProxy;}
注释表明了这个 if 的作用是，判断目标对象是否是响应式，如果是则返回，所以 c 得到的还是响应式的数据
结论：对响应式数据进行解构赋值，如果解构出来的数据是 基本数据类型，则会丢失响应式，如果是 引用类型，则不会丢失响应式。
三、使用vuex的数据进行赋值
<template><h1>{{ test }}</h1><h1>{{ testCom }}</h1>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
// store.state.testData的初始值为 '11111'
let test = ref(store.state.testData) // 相当于let test = ref('11111')
// 解决办法
let testCom = computed(() => {return store.state.testData
}) onMounted(() => {setTimeout(() => {store.commit('getTestData', '12345')}, 3000)
})
</script>
原因： 还是变量赋值的原因，就不赘述了
解决办法： 使用 computed
相关文章：
Vue3，什么情况下数据会丢失响应式呢？
一、使用 reactive 定义的数据重新赋值 <template><h1>{{ foo.a }}</h1><h1>{{ bar.a }}</h1><button click"handleClick">点我</button> </template> <script setup> import { ref, reactive } from vuele…...
【Vim Masterclass 笔记03】S03L10 + S03L11：Vim 中的文本删除操作以及 Vim 思维习惯的培养（含 DIY 拓展知识点）
文章目录 Section 3：Vim Essentials（Vim 核心知识）S03L10 Vim 核心浏览命令同步练习点评课S03L11 Deleting Text and "Thinking in Vim" 文本的删除及 Vim 思维习惯的培养1 删除单个字符2 删除一个单词2.1 推广1：D HJK…...
《Java核心技术II》流中的filter、map和flatMap方法
filter、map和flatMap方法 filter filter通过转换产生过滤后的新流,将字符串流转化为只包含长单词的另一个流。 List words ...; Stream longWords words.stream().filter(w->w.length()>12) filter类型是Predicate(谓词，表示动作)类型对象，…...
logback之自定义过滤器
logback有两种过滤器，一种是context中的过滤器叫TurboFilter，是一个全局的过滤器，会影响所有的日志记录。另一种是Appender中的过滤器，只对所在的append有效。两者大同小异，这里我们以Appender的过滤器为例。 &#x…...
【论文阅读笔记】IceNet算法与代码 | 低照度图像增强 | IEEE | 2021.12.25
目录 1 导言 2 相关工作 A 传统方法 B 基于CNN的方法 C 交互方式 3 算法 A 交互对比度增强 1)Gamma estimation 2)颜色恢复 3)个性化初始η B 损失函数 1)交互式亮度控制损失 2)熵损失 3)平滑损失 4)总损失 C 实现细节 4 实验 5 IceNet环境配置和运行 1 下载…...
查看 GitHub 仓库的创建时间
查看 GitHub 仓库的创建时间 1. https://api.github.com/repos/{owner}/{repository}2. curl -s https://api.github.com/repos/{owner}/{repository} | jq .created_atReferences 1. https://api.github.com/repos/{owner}/{repository} REST API endpoints for repositories…...
五种被低估的非常规统计检验方法：数学原理剖析与多领域应用价值研究
在当前的数据分析实践中，研究人员往往过度依赖t检验和方差分析（ANOVA）等传统统计方法。但是还存在多种具有重要应用价值但未受到足够重视的统计检验方法，这些方法在处理复杂的实际数据时具有独特优势。本文将详细介绍五种具有重要…...
)
mysql重置root密码(适用于5.7和8.0)
今天出一期重置mysql root密码的教程，适用于5.7和8.0，在网上搜索了很多的教程发现都没有效果，浪费了很多时间，尝试了多次之后发现这种方式是最稳妥的，那么废话不多说，往下看： 目录 第一步&…...
【AIGC-ChatGPT职业提示词指令】职业发展的航海指南：在人生的十字路口做出明智抉择
引言 在职业发展的海洋中，每个人都会遇到需要重要抉择的时刻。这些关键节点就像航海中的分岔路口，选择不同的航线可能驶向截然不同的目的地。如何在这些关键时刻做出明智的选择，需要我们既要着眼当下的风向，也要洞察远方的航程。…...
【从零开始入门unity游戏开发之——C#篇39】C#反射使用——Type 类、Assembly 类、Activator 类操作程序集
文章目录 前言一、前置知识1、编译器2、程序集（Assembly）3、元数据（Metadata） 二、反射1、反射的概念2、反射的作用3、反射的核心Type 类3.1 Type 类介绍3.2 不同方法获取 Type3.3 获取type类型所在的程序集的相关信息 4、反射的常…...
如何启动CentOS6远程服务器和进行ssh远程登录？
如何启动CentOS 6远程服务器？ 在CentOS 6中，启动远程服务器通常涉及到配置SSH服务和VNC服务，以下是详细的步骤： 配置SSH服务 确认是否安装SSH 首先需要检查系统中是否已经安装了SSH服务，打开终端并输入以下命令&am…...
面向机器学习的Java库与平台
学习Java语言中与机器学习相关的各种库与平台，了解每个库的功能，以及可以用它 们解决的问题。 实现机器学习应用时需要具备的Java环境 Weka：一个通用的机器学习平台 Java机器学习库：一系列机器学习算法 Apache Mah…...
AI大模型语音识别转文字
提取音频 本项目作用在于将常见的会议录音文件、各种语种音频文件进行转录成相应的文字，也可从特定视频中提取对应音频进行转录成文字保存在本地。最原始的从所给网址下载对应视频和音频进行处理。下载ffmpeg(https://www.gyan.dev/ffmpeg/builds/packages/ffmpeg-…...
GAN对抗生成网络（一）——基本原理及数学推导
1 背景 GAN(Generative Adversarial Networks)对抗生成网络是一个很巧妙的模型，它可以用于文字、图像或视频的生成。 例如，以下就是GAN所生成的人脸图像。 2 算法思想 假如你是《古董局中局》的文物造假者（Generator,生成器）&a…...
LeetCode - 初级算法 数组（旋转数组）
旋转数组 这篇文章讨论如何通过编程实现数组元素的旋转操作。 免责声明：本文来源于个人知识与公开资料，仅用于学术交流。 描述 给定一个整数数组 nums，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。 示例： 输入: nums = [1,2,3,...
目标检测入门指南：从原理到实践
目录 1. 数据准备与预处理 2. 模型架构设计 2.1 特征提取网络原理 2.2 区域提议网络(RPN)原理 2.3 特征金字塔网络(FPN)原理 2.4 边界框回归原理 2.5 非极大值抑制(NMS)原理 2.6 多尺度训练与测试原理 2.7 损失函数设计原理 3. 损失函数设计 4. 训练策略优化 5. 后…...
连接github和ai的桥梁：GitIngest
Git ingest GitIngest - 将任何 Github 仓库转变为适合 LLM 的友好型提示文本 (https://github.com/cyclotruc/gitingest) 输入 Github 地址或者名称，GitIngest 就会提供该仓库的总结、目录结构、仓库内容的文本内容 你可以复制这些文本与 AI 大模型更好地对话...
百度贴吧的ip属地什么意思？怎么看ip属地
在数字化时代，IP地址不仅是网络设备的唯一标识符，更承载着用户的网络身份与位置信息。百度贴吧作为广受欢迎的社交平台，也遵循相关规定，在用户个人主页等位置展示账号IP属地信息。那么，百度贴吧的IP属地究竟意味着什么…...
5.系统学习-PyTorch与多层感知机
PyTorch与多层感知机 前言PyTroch 简介张量（Tensor）张量创建张量的类型数据类型和 dtype 对应表张量的维度变换：张量的常用操作矩阵或张量计算 Dataset and DataLoaderPyTorch下逻辑回归与反向传播数据表格 DNN（全连结网络&#x…...
wpf 基于Behavior库 的行为模块
Microsoft.Xaml.Behaviors 是一个用于WPF（Windows Presentation Foundation）的行为库，它的主要作用是允许开发者在不修改控件源代码的情况下，为控件添加自定义的行为和交互逻辑。行为库的核心思想是通过定义可重用的行为组件&…...
【一文解析】新能源汽车VCU电控开发——能量回收模块
一、概述 VCU（Vehicle Control Unit，整车控制器）能量回收功能是新能源汽车（如纯电动汽车和混合动力汽车）中非常重要的一个环节。它主要是在车辆减速或制动过程中，将车辆的部分动能转化为电能，并…...
鸿蒙TCPSocket通信模拟智能家居模拟案例
效果图 一、智能家居热潮下的鸿蒙契机 在当下科技飞速发展的时代，智能家居已如浪潮般席卷而来，深刻地改变着我们的生活方式。从能依据环境光线自动调节亮度的智能灯具，到可远程操控、精准控温的智能空调，再到实时监测健康数据的智…...
【Spring Boot 实现 PDF 导出】
Spring Boot 实现 PDF 导出 在Spring Boot应用程序中实现PDF导出功能，可以选择多种库和技术栈。每种方法都有其优缺点，适用于不同的场景。以下是四种常见的方式：iText、Apache PDFBox、JasperReports 和 Thymeleaf Flying Saucer。我将详细…...
【Python】selenium结合js模拟鼠标点击、拦截弹窗、鼠标悬停方法汇总（使用 execute_script 执行点击的方法）
我们在写selenium获取网络信息的时候，有时候我们会受到对方浏览器的监控，对方通过分析用户行为模式，如点击、滚动、停留时间等，网站可以识别出异常行为，进而对Selenium爬虫进行限制。 这里我们可以加入JavaScript的使…...
leetcode hot 100 前k个高平元素
347. 前 K 个高频元素 已解答 中等 相关标签 相关企业 给你一个整数数组 nums 和一个整数 k ，请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 class Solution(object):def topKFrequent(self, nums, k):""":type nums: Lis…...
数据结构漫游记：静态双向链表
嘿，各位技术潮人！好久不见甚是想念。生活就像一场奇妙冒险，而编程就是那把超酷的万能钥匙。此刻，阳光洒在键盘上，灵感在指尖跳跃，让我们抛开一切束缚，给平淡日子加点料，注入满满的pa…...
 完整指南)
Object.defineProperty() 完整指南
Object.defineProperty() 完整指南 1. 基本概念 Object.defineProperty() 方法允许精确地添加或修改对象的属性。默认情况下，使用此方法添加的属性是不可修改的。 1.1 基本语法 Object.defineProperty(obj, prop, descriptor)参数说明： obj: 要定义…...
1Panel自建RustDesk服务器方案实现Windows远程macOS
文章目录 缘起RustDesk 基本信息实现原理中继服务器的配置建议 中继服务器自建指南准备服务器安装1Panel安装和配置 RustDesk 中继服务防火墙配置和安全组配置查看key下载&安装&配置客户端设置永久密码测试连接 macOS安装客户端提示finder写入失败hbbs和hbbr说明**hbbs…...
nginx学习之路-windows系统安装nginx
文章目录 1. 下载2. 启动3. 验证参考文档 1. 下载 官方下载地址：https://nginx.org/en/download.html 可以下载windows版本，如nginx-1.26.2.zip。解压后，加入系统变量。 2. 启动 可以使用命令行启动（windows系统自带的cmd可能…...
Paimon_01_241020
1. 概述 1.1. 核心特点 统一批处理和流处理（流和批同一套代码）数据湖能力多种引擎平权变更日志生成丰富的表类型（主键表、append-only，有序的流式读取来代替消息队列）模式演化（schema变更） 1…...
人工智能：变革时代的核心驱动力
求各位观众老爷看一看 先声明一下，该内容由于篇幅过长，可能会有一些地方存在一些小问题请大家谅解 观众老爷们，点个免费的赞和关注呗，您们的支持就是我最大的动力~ 人工智能：变革时代的核心驱动力 一、引言 在当今…...
【机器学习】工业 4.0 下机器学习如何驱动智能制造升级
我的个人主页 我的领域：人工智能篇，希望能帮助到大家！！！👍点赞 收藏❤ 随着科技的飞速发展，工业 4.0 浪潮正席卷全球制造业，而机器学习作为这一变革中的关键技术，正以前…...
数据分析-Excel
数据类型和函数初步 Excel中有文本类型和数值类型–但是无法用肉眼分辨出来isnumber来区分是否是数值类型text和value函数可以完成数值类型以及文本类型的转换单元格第一位输入’方式明确输入的是文本sum函数必须是数值类型 文本连接-and-or-not-if-mod-max函数 字符串的连接…...
Kubernetes第二天
1.pod运行一个容器 1.创建目录 mkdir -p /manifests/pod 2.编写pod资源清单文件 vim 01-myweb.yaml 说明： apiVersion:指的是Api的版本 metadata：资源的元数据 spec:用户期望的资源的运行状态 status：资源实际的运行状态 由于拉取远…...
【Java 学习】深度剖析Java多态：从向上转型到向下转型，解锁动态绑定的奥秘，让代码更优雅灵活
💬 欢迎讨论：如对文章内容有疑问或见解，欢迎在评论区留言，我需要您的帮助！ 👍 点赞、收藏与分享：如果这篇文章对您有所帮助，请不吝点赞、收藏或分享，谢谢您的支持&#x…...
Kerberos用户认证-数据安全-简单了解-230403
hadoop安全模式官方文档：https://hadoop.apache.org/docs/r2.7.2/hadoop-project-dist/hadoop-common/SecureMode.html kerberos是什么 kerberos是计算机网络认证协议，用来在非安全网络中，对个人通信以安全的手段进行身份认证。 概念&#…...
大中厂面试经验分享：如何使用消息队列（MQ）解决系统问题
在大中型互联网公司中，消息队列（MQ）作为一种关键的分布式系统组件，广泛应用于解决系统中的高并发、异步处理、解耦等问题。 在面试中，尤其是针对后端工程师或系统架构师的职位，面试官常常会通过询问消息队列…...
c#String和StringBuilder
目录 一，String 1，string的特点： 2，string常用方法 （1）Length （2）Substring() （3）ToUpper() （4）ToLower() （5&…...
【人工智能机器学习基础篇】——深入详解强化学习之常用算法Q-Learning与策略梯度，掌握智能体与环境的交互机制
深入详解强化学习之常用算法：Q-Learning与策略梯度 强化学习（Reinforcement Learning, RL）作为机器学习的一个重要分支，近年来在多个领域取得了显著成果。从棋类游戏的人机对战到自主驾驶汽车，强化学习技术展示了其强大…...
jQuery学习笔记2
jQuery 属性操作 <body><a href"http://www.itcast.cn" title"都挺好">都挺好</a><input type"checkbox" name"" id"" checked /><div index"1" data-index"2">我是div&…...
发现API安全风险，F5随时随地保障应用和API安全
分析数据显示，目前超过90%的基于Web的网络攻击都以API端点为目标，试图利用更新且较少为人所知的漏洞，而这些漏洞通常是由安全团队未主动监控的API所暴露。现代企业需要一种动态防御策略，在风险升级成代价高昂、令人警惕且往往无法…...
移动端如何实现上拉加载
一、理解上拉加载的原理 上拉加载是一种在移动端很常见的交互方式，其原理是当用户在页面上向上滑动（即滚动条接近底部）时，触发一个加载更多数据的操作。这通常涉及到对滚动事件的监听以及判断滚动位置是否达到了触发加载的阈值。…...
the request was rejected because no multipart boundary was found
文章目录 1. 需求描述2. 报错信息3. 探索过程 1. 使用postman 排除后端错误2. 搜索网上的解决方法3. 解决方法 1. 需求描述 想要在前端上传一个PDF 发票，经过后端解析PDF之后，将想要的值自动回填到对应的输入框中 2. 报错信息 org.apache.tomcat.u…...
Android 自定义shell命令
模拟触摸、按键等操作，直接在命令行输入对应命令即可。命令行如何识别并操作此命令，执行操作的是shell程序，还是java程序？是不是可以添加自定义的命令？ 以下在Android13的代码中分析input命令 Android系统中使用了一…...
HTML5滑块（Slider）
HTML5 的滑块（Slider）控件允许用户通过拖动滑块来选择数值。以下是如何实现一个简单的滑块组件的详细说明。 HTML5 滑块组件 1. 基本结构 使用 <input type"range"> 元素可以创建一个滑块。下面是基本实现的代码示例： <…...
《SwiftUI 实现点击按钮播放 MP3 音频》
功能介绍 点击按钮时，应用会播放名为 yinpin.mp3 的音频文件。使用 AVAudioPlayer 来加载和播放音频。 关键点： 按钮触发：点击按钮会调用 playAudio() 播放音频。音频加载：通过 Bundle.main.url(forResource:) 加载音频文件。播…...
表单元素（标签）有哪些？
HTML 中的表单元素（标签）用于收集用户输入的数据，常见的有以下几种： 文本输入框 <input type"text">：用于单行文本输入，如用户名、密码等。可以通过设置maxlength属性限制输入字符数&…...
大型ERP系统GL（总账管理）模块需求分析
主要介绍了GL系统的需求分析，包括系统概述、功能描述、帐薄管理、报表管理、期末处理、财务报表以及凭证的快速输入方式、可用性设计、保存、自动审核和打印等方面的内容。系统概述部分介绍了系统的功能结构和模块流程图。 功能描述部分详细描述了系统的基础资料和业…...
大全)
SQL常用语句(基础)大全
SQL语句的类型 1.DDL 1.库2.表 2.DML 1.插入数据 insert inot2.删除数据 delete / truncate3.修改数据 update set 3.DQL 1.无条件查询2.查询 什么开始 到什么结束3.指定条件查询 1.单个条件 ro in2.多个条件 and4.查询不为NULL值 is not null ,为NULL值 is null5.模糊查询 li…...
关于HarmonyOS Next中卡片的使用方法
关于Harmony OS中卡片的使用方法 在Harmony OS中，静态卡片是一种非常有用的组件，用于提供应用内功能组件的交互和信息展示。本文将详细介绍如何在Harmony OS中使用静态卡片以及相关的API接口。 1. 概述 静态卡片是Harmony OS中的一种交互组件…...