vue3的响应式赋值中数组array,对象object,集合set的重新赋值怎么操作,问过Chatgpt的答案

vue3和ts结合开发的时候,总是会遇到引用数据类型的重新赋值的情况,但是在vue3中,又不能使用直接赋值的情况,因为会改变proxy的结构,导致响应式失败,那么该如何重新赋值响应式对象数据成为了一个技巧问题,今天它来了

数组Array的响应式赋值

如果是数组的话,踩坑点:**清空数组,然后再重新给数组赋值的时候,发现数组变化了页面没有响应,代码如下:

derwayList = [];// 或者使用下面的也不行
derwayList = reactive([]);

原因:虽然重新代理了,但是这个数组已经不是页面上的数组,也就不是setup返回出去的那个,通俗来说就是你大爷已经不是你大爷了

正确的使用方式应该是:

//方案一:
derwayList.splice(0, derwayList.length);//方案二:
derwayList.length = 0;// 然后使用解构重新赋值
derwayList.push(...newList)

对象Object重新赋值

对于对象不能直接重新赋值原因和数组是一样的,正确的赋值方式应该是

// 对象的响应式
type res = {code: numberdata: string[]message: stringstate?: string
}
const response: res = reactive({ code: 0, data: [], message: '' })
// 修改对象的值
const editRes = function () {response.code = 200
}
// 增加对象的值
const addRed = function () {response.state = 'success'
}
// 删除对象的值
const delRes = function () {delete response.message
}
// 重新赋值
const newRes = function () {const newValue = {code: 500,data: ['error'],message: '出错了'}Object.assign(response, newValue)
}

集合Set响应式赋值

集合响应式不能重新赋值也是一样的道理,所以集合的重新赋值应该是:

// 集合的重新赋值
const set1 = reactive(new Set(['1', '2', '3']))
// 添加
const addSet = () => {set1.add('六')
}// 删除
const delSet = () => {set1.delete('一')
}// 清空集合
const clsSet = () => {set1.clear()
}// 重新赋值
const newSet = () => {const newSet = new Set(['4', '5', '6'])set1.clear()newSet.forEach((item) => {set1.add(item)})
}

而且这部分修改我还专门问了chatgpt,但是chatgpt给我的一种方式不知道为什么不起作用,然后我又问它,它告诉我了上面的方式,所以下面的方式可能会不起作用:

const newSet = new Set([4, 5, 6]);
Object.setPrototypeOf(newSet, setCollection); // 继承原始的 Set 实例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/10498.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用gpt的感受,结尾附注册使用方式

最近一直很火的chatgpt,我也去试了一下,感觉还是用的很舒服的。 优点 感觉舒服的地方就是可以联系上下文,不像传统的搜索引擎一样,找不到的话得重新组织语言去搜索,可以跟gpt学习英语,问编程问题&#xf…

GIT使用的问题及解决

随时遇见,随机解决,同步记录 ~ 文章目录 ① git commit 失败:Author identity unknown *** Please tell me who you are.② git clone,git pull 提示 Permission denied,找不到私钥文件③ 重启电脑后,使用 …

解决Microsoft Bing 支持 ChatGPT后加入等待队列出错问题

解决Microsoft Bing 支持 ChatGPT后加入候补名单出错问题 代理进入https://www.bing.com/new,正确界面如下图: 如果进入直接跳转下图界面,则需要清除与bing相关的cookie(设置里清除,这样就能之间跳转到加入候补名单的…

反射和动态代理

目录 v20230514更新 Userjava反射本质 反射的核心 获取Class对象: 创建对象: 调用方法: 访问字段: 需要注意的是, 综上所述, Userjava动态代理本质 两个核心的类:Proxy和InvocationH…

ChatGPT还在2G冲浪?新模型「youChat」:我已能够解说2022世界杯

视学算法报道 编辑:蛋酱、小舟 youChat 能成为搜索引擎变革的先行者吗? ChatGPT 自推出以来就被寄予厚望,一些人认为它会取代搜索引擎,成为「改变游戏规则的人」。 真的会有这一天吗?至少,一部分业内人士已…

流浪气球?ChatGPT这样回答,我惊了

近日,流浪地球电影反响热烈,“流浪气球”事件讨论热火,连人工智能ChatGPT都发表了 “自己”的看法,到底是怎么一回事呢?起因是我国一只民用气球,因技术和天气原因不小心飘到了米国上空,对方当时…

chatgpt赋能python:Python收发短信:简单可靠的解决方案

Python收发短信:简单可靠的解决方案 如果您需要向客户发送定期提醒或通知的短信,则 Python 是一种简单易用的解决方案。在本文中,我们将介绍如何使用 Python 发送和接收短信,并探讨一些流行的短信 API。 什么是短信 API&#xf…

chatgpt赋能python:Python编程——创新发短信新方式

Python编程——创新发短信新方式 在现代社会,短信是一种非常实用的通讯方式,广泛应用于各种场合。在Python编程领域中,通过利用各种API,我们能够创新地发短信并满足不同场景使用需求。本篇文章将介绍在Python编程中实现发短信的基…

chatgpt赋能python:Python短信发送:简单快捷的商业应用方式

Python短信发送:简单快捷的商业应用方式 介绍 随着科技的不断发展,短信已经成为商业沟通的重要渠道之一。许多业务场景需要使用短信进行客户沟通,例如短信验证码、促销短信、物流短信等等。 Python作为一种高效的编程语言,在短…

chatgpt赋能python:如何利用Python拦截短信验证码

如何利用Python拦截短信验证码 短信验证是现代互联网应用程序中最普遍的安全措施之一。然而,有些黑客试图入侵用户账户,通过拦截其短信验证码来获得访问权限。这可能会导致灾难性的后果,包括数据泄露和财务损失。 幸运的是,Pyth…

chatgpt赋能python:Python免费发短信:如何使用Python发送免费短信

Python免费发短信:如何使用Python发送免费短信 在现代社会中,短信已经成为人们生活中必不可少的一部分。大量的人们都使用短信来进行交流,包括商业交流和个人交流。如今,许多公司提供的短信服务费用比较高,这让许多用…

chatgpt赋能python:Python短信接口:如何实现高效、便捷的短信发送?

Python短信接口:如何实现高效、便捷的短信发送? 作为一项必不可少的应用,短信服务已成为商家与客户互动的重要手段。为此,短信接口成为实现短信服务的关键要素。Python作为一种优秀的编程语言,不仅具备高效、快速的处…

chatgpt赋能python:Python实现给手机发短信指南

Python实现给手机发短信指南 随着智能手机的普及,人们越来越习惯于通过短信和社交媒体来进行沟通。因此,发送短信已经成为了现代通讯的一部分。Python作为一种非常简单易用的编程语言,也可以用来发送短信。本篇文章将介绍如何使用Python在移…

chatgpt赋能python:如何使用Python发送短信

如何使用Python发送短信 短信是一种简单有效的沟通方式,特别是在紧急情况下。而Python作为一种著名的编程语言,提供了许多库来实现短信发送。在本文中,我们将介绍一些可用的Python库和如何使用它们发送短信。 Twilio Twilio是一个使用Pyth…

我用ChatGPT搞懂GPT技术原理,只问了30个问题,这是极致的学习体验!

自己前段时间写了一篇文章《问了ChatGPT 上百个问题后,我断定ChatGPT可以重塑学习范式!》,讲了使用ChatGPT的感受,最近我开始学习GPT的技术原理,原因有三个: 1、工作中有可能要用到GPT,理解GPT的…

ChatGPT的插件能用了,每月 20 美元的实习生真香

文章目录 开启插件并使用其他补充缺点和不足总结 哈喽嗨!你好,我是小雨青年,一名 追赶 AI 步伐的程序员。 自从上周 OpenAI 官宣了即将开放插件给 Plus 用户以来,这三天我就每天都会刷新ChatGPT 设置页面。 直到今天早上&#x…

4.AI人工智能大模型汇总:类GPT系列模型、模型中转站Auto-GPT、多模态大模型、视觉模型、自然语言模型

AI人工智能大模型汇总:类GPT系列模型、模型中转站Auto-GPT、多模态大模型、视觉模型、自然语言模型 模型名称发布方类型开源类型原始模型框架paddle版本模型能力模型语言模型参数简介模型链接体验链接paddle版本链接项目链接备注发布日期创建人模型星火认知大模型科大讯飞语言…

用GPT-4写代码不用翻墙了?Cursor告诉你:可以~~

目录 一、介绍 二、使用方法 三、其他实例 1.正则表达式 2.自动化测试脚本 3.聊聊技术 一、介绍 Cursor主要功能是根据用户的描述写代码或者进行对话,对话的范围仅限技术方面。优点是不用翻墙、不需要账号。Cursor基于GPT模型,具体什么版本不祥&#…

ChatGPT,又爆了!

太火爆了 最近一段时间,ChatGPT技术爆火了,和ChatGPT相关的知识星球也越来越多,业内很多人把这戏称为“星球大战”。 ChatGPT是当今的技术红利,如果一定要加入一个星球,那就选择一个靠谱的。我的朋友程序员小灰&#x…

ChatGPT Sorry, you have been blocked解决方法

很多朋友在使用Chat GPT的时候会遇到Sorry, you have been blocked这个提示,都以为自己账号被封了,其实不是的,这是由于的你ip被污染了(用的人太多),多数代理通过更换i&a…