首页 > 其他分享 >vue2 修改 this.form = response.data数据,form2也会影响?

vue2 修改 this.form = response.data数据,form2也会影响?

时间:2024-01-06 21:33:06浏览次数:36  
标签:form 对象 form2 JSON 拷贝 oldForm data response

vue2        this.form = response.data

       this.oldForm = response.data为啥this.form数据变化会影响this.oldForm里的数据

在 Vue 2 中,当你在组件中看到一个数据属性(例如 this.form 和 this.oldForm)的值发生变化时,这通常是因为 Vue 的响应式系统在背后工作。

当你执行以下代码:

javascript复制代码
 this.form = response.data;  
 
 this.oldForm = response.data;

实际上,你正在将 response.data 的引用分别赋给 this.form 和 this.oldForm。在 JavaScript 中,对象是通过引用传递的,而不是通过值传递的。因此,当你在稍后的某个时刻修改 this.form 时,你实际上是在修改原始对象(即 response.data)。由于 this.oldForm 也指向同一个对象,因此它也会反映这些更改。

要避免这种情况,你可以确保 this.oldForm 存储 response.data 的一个深拷贝,而不是直接引用同一个对象。你可以使用 JSON.parse(JSON.stringify(response.data)) 来创建一个深拷贝:

javascript复制代码
 this.form = response.data;  
 
 this.oldForm = JSON.parse(JSON.stringify(response.data));

这样,即使你修改了 this.formthis.oldForm 仍然会保持其原始值不变。


this.oldForm = JSON.parse(JSON.stringify(response.data)); 和 this.oldForm = Object.assign({}, response.data); 都可以用来复制对象,但它们的工作方式和效率有所不同。

  1. 工作方式:
  • JSON.parse(JSON.stringify(response.data)): 这个方法将对象转换成一个 JSON 字符串,然后再将该字符串转换回一个对象。这意味着它会遍历对象的所有属性,并将它们转换为字符串。然后,它会创建一个新的空对象,并将转换后的字符串属性复制回这个新对象。
  • Object.assign({}, response.data): 这个方法会创建一个新的空对象,并从 response.data 复制所有可枚举的自有属性到这个新对象。与前者相比,它不需要将对象转换为字符串,也不需要序列化和反序列化过程。
  1. 速度:
  • JSON.parse(JSON.stringify(response.data)) 会比 Object.assign({}, response.data) 更慢,因为它涉及到额外的字符串转换和可能的编码/解码开销。
  • Object.assign() 通常更快,因为它直接在内存中操作对象,避免了字符串处理。
  1. 深拷贝 vs 浅拷贝:
  • JSON.parse(JSON.stringify(response.data)) 会创建一个浅拷贝。这意味着如果原始对象的属性值是引用类型(如数组或对象),那么复制的对象的该属性值将是指向原始值的引用。
  • Object.assign({}, response.data) 也会创建浅拷贝,但只会复制自有属性(即直接在源对象上定义的属性)。如果源对象的原型链上有属性,那么这些属性不会被复制。
  1. 适用场景:
  • 如果你需要一个浅拷贝并且不关心性能,那么 JSON.parse(JSON.stringify(...)) 是一个简单的方法。
  • 如果你需要一个快速的浅拷贝或者要确保只复制自有属性,那么 Object.assign() 是一个更好的选择。
  • 如果你需要一个深拷贝,那么你需要使用其他方法或库来实现,因为上述两种方法都只提供浅拷贝。

总结:如果你只关心浅拷贝并且关心性能,那么 Object.assign() 通常会更快。如果你对深拷贝有需求,那么你应该考虑使用其他方法或库。

标签:form,对象,form2,JSON,拷贝,oldForm,data,response
From: https://blog.51cto.com/janeyork/9127888

相关文章

  • 项目经验还写外卖和商城?来看看异构数据源数据流转服务DatalinkX
     前言作为一个年迈的夹娃练习生,每次到了春招秋招面试实习生时都能看到一批简历,十个简历里得有七八个是写商城或者外卖项目。不由得想到了我大四那会,由于没有啥项目经验,又想借一个质量高点的项目通过简历初筛,就找到了谷粒商城,面对408集的视频教程实在是难以坚持到终点。。。并且很......
  • LLM增强LLM;通过预测上下文来提高文生图质量;Spikformer V2;同时执行刚性和非刚性编辑的
    文章首发于公众号:机器感知LLM增强LLM;通过预测上下文来提高文生图质量;SpikformerV2;同时执行刚性和非刚性编辑的通用图像编辑框架LLMAugmentedLLMs:ExpandingCapabilitiesthroughComposition本文研究了如何高效地组合现有的基础模型以实现新功能的问题,文章提出了CALM(Comp......
  • 从RNN到Transformmer
    下面是整理的一个思维导图2010年Mikolov提出了RNN网络,RNN网络存在长距离依赖(梯度消失),计算效率(RNN难以并行)两个问题2017年Transformmer网络结构问世,Transformer网络架构架构由AshishVaswani等人在AttentionIsAllYouNeed一文中提出,并用于机器翻译任务,和以往网络架构......
  • 恭喜 Databend 上榜 2023 开源创新榜「优秀开源项目 」
    近日,国家科技传播中心见证了一场开源界的重要事件:由中国科协科学技术传播中心、中国计算机学会、中国通信学会和中国科学院软件研究所联合主办,CSDN承办的2023年开源创新榜专家评审会圆满落幕。由王怀民院士担任评委会主任,评委会成员包括来自全国的学会、大学、科研院所、企业、......
  • 使用Power Automate获取Dataverse数据作为Excel附件发送邮件
    这是我的第506篇原创文章,写于2024年1月5日。之前我写过一篇文章 使用PowerAutomate获取CDS中数据并附加到邮件中发送,发送的是CSV,如果要发送Excel呢?今天我根据 CreateAnExcelFileAndAddRowsUsingPowerAutomate 的文章来做个发送Excel的例子。我创建一个Manuallytrigg......
  • ICLR 2022: Anomaly Transformer论文阅读笔记+代码复现
    本论文全名为AnomalyTransformer:TimeSeriesAnomalyDetectionwithAssociationDescrepancy(通过关联差异进行时序异常检测),主要提出了一种无监督的异常点检测算法,并在6个benchmarks上测试,获取良好结果。论文链接:ANOMALYTRANSFORMER:TIMESERIESANOMALYDETECTIONWITHAS......
  • SpringDataJpa框架使用【超详细!】
    SpringDataJpa框架使用【超详细!】SpringDataJpa框架使用文档一、什么是Jpa?jpa的全称是JavaPersistenceAPI,中文的字面意思就是java的持久层API,jpa就是定义了一系列标准,让实体类和数据库中的表建立一个对应的关系,当我们在使用java操作实体类的时候能达到操作数......
  • datavault4dbt Scalefree的dbt datavault2.0 包
    基于基于dbt的datavault2.0实现还是不少的,可以加速模型的创建,以前简单介绍的automate-dv也是一个类似的dbt包包含的maccroStagingArea(ForHashing,prejoinsandghostrecords)Hubs,Links&Satellites(allowingmultipledeltas)Non-HistorizedLinksandSatelli......
  • Databend 的算力可扩展性
    作者:尚卓燃(PsiACE)澳门科技大学在读硕士,Databend研发工程师实习生ApacheOpenDAL(Incubating)Committerhttps://github.com/PsiACE对于大规模分布式数据处理系统,为了更好应对数据、流量、和复杂性的增长,需要对系统的可扩展性加以重视。可拓展性代表一种预期,即在现有软件和......
  • 产品发布|Aloudata AIR 国内首个 Data Fabric 逻辑数据平台
    Aloudata AIR作为国内首个 Data Fabric 逻辑数据平台,通过自研的数据虚拟化技术,轻松实现多源异构数据的集成整合和自适应加速,为 Data Fabric 数据架构理念在国内的实践落地开辟了清晰的路径。传统“搭湖建仓”遇上数据管理“新挑战”得益于互联网和移动互联网的发展,以及数字......