首页 > 其他分享 >vue对象深拷贝、浅拷贝(对象之间的=赋值会存在浅拷贝)

vue对象深拷贝、浅拷贝(对象之间的=赋值会存在浅拷贝)

时间:2024-08-28 17:27:02浏览次数:3  
标签:vue 对象 analyconfigdata JSON props aitem 拷贝

vue对象深拷贝、浅拷贝

浅拷贝: 将A对象赋值给B对象,修改B对象的属性和方法会影响到A对象的属性和方法。
深拷贝: 将A对象赋值给B对象,修改B对象的属性和方法不会影响到A对象的属性和方法。

原因:复杂类型的赋值是浅拷贝,直接赋值 会导致双向修改
解决的方法:将浅拷贝转换成深拷贝
解决思路:先把该对象转成字符串(普通数据类型), 就没有引用类型的影响了。再转回对象使用。
JSON.parse(JSON.stringify(obj))
满足一般使用场景,但无法实现对象中方法(fountion)的深拷贝
let obj = {
    id: 1,
    name: '张三',
    age: 10,
}
let newObj = JSON.parse(JSON.stringify(obj))

例子:

1、对象直接复制:(等同于浅拷贝)有问题会改变原数组

  const arryNew = props.analyconfigdata.bselectoptions;//属于浅拷贝,会修改原对象值
  console.error(props.analyconfigdata.bselectoptions, "执行前");
  for (var i = 0; i < props.analyconfigdata.config.length; i++) {
    let arryNewitem = [];
    for (var j = 0; j < props.analyconfigdata.bselectoptions.length; j++) {
      const aitem = arryNew[j]; //属于浅拷贝,会修改原对象值
      arryNewitem.push(aitem);
      aitem["checked" + i + j] = false;
      bseatValue.value[i].push(aitem);
    }
    bseatValue.value[i]["checkAll"] = true;
  }
  console.error(bseatValue.value);
  console.error(props.analyconfigdata.bselectoptions, "执行后");

2、转换为深拷贝然后对象赋值后

 const arryNew = JSON.parse(JSON.stringify(props.analyconfigdata.bselectoptions));
  console.error(props.analyconfigdata.bselectoptions, "执行前");
  for (var i = 0; i < props.analyconfigdata.config.length; i++) {
    let arryNewitem = [];
    for (var j = 0; j < props.analyconfigdata.bselectoptions.length; j++) {
      const aitem = JSON.parse(JSON.stringify(arryNew[j]));
      arryNewitem.push(aitem);
      aitem["checked" + i + j] = false;
      bseatValue.value[i].push(aitem);
    }
    bseatValue.value[i]["checkAll"] = true;
  }
  console.error(bseatValue.value);
  console.error(props.analyconfigdata.bselectoptions, "执行后");

参考文献:https://blog.csdn.net/weixin_51747462/article/details/128766770

标签:vue,对象,analyconfigdata,JSON,props,aitem,拷贝
From: https://www.cnblogs.com/ZhuMeng-Chao/p/18385189

相关文章

  • 【已解决】Vue Duplicate keys detected: ‘[object Object]’
    【已解决】VueDuplicatekeysdetected:‘[objectObject]’在Vue项目开发过程中,我们可能会遇到这样的报错:“Duplicatekeysdetected:‘[objectObject]’.Thismaycauseanupdateerror.”。这个错误通常发生在Vue的虚拟DOM进行渲染更新时,如果检测到重复的key值,就......
  • vue中使用echarts
    以下使用的echarts版本为5.5.1,未使用ts(命名为规范仅作参考)<template> <div@click="myEcharts(1)">zhanshi</div> <divclass="Echarts">  <divid="main11"style="width:70vw;height:60vh"></div> ......
  • vue中的指令
    指令是指使用v-开头的,常见的有:v-text,v-html,v-if,v-show,v-model,v-bind,v-on,v-forv-text:用于更新值,不会解析标签,和JavaScript中的innerTEXT类似<pv-text="message"></p>v-html:可以将解析标签,和JavaScript中的innerHTML类似<template><!--主体内容区域--><di......
  • 计算机毕业设计django+vue小区物业管理系统【开题+论文+程序】
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着城市化进程的加快,小区作为城市生活的基本单元,其物业管理水平直接影响着居民的生活质量和社会和谐。传统的小区物业管理方式往往依赖于......
  • vue3的 状态管理库
    1.vue的状态管理库vue常用的状态管理库有 vuex 和Pinia,两者的区别如下:架构设计‌:Vuex采用全局单例模式,通过一个store对象来管理所有的状态;而Pinia采用了分离模式,每个组件都拥有自己的store实例。模块设计:Vuex包含states、mutations、getters、actions、modules,mutat......
  • 外贸管理系统采购销售报关计算机毕业设计VUE/PYTHON/MYSQL
    开发一个基于Vue、Python和MySQL的外贸管理系统,用于处理采购、销售以及报关等业务流程。这样的系统通常涉及前端界面展示、后端逻辑处理以及数据库存储等多个部分。下面是一些关键组件的设计建议:1.技术栈选择前端:Vue.js后端:Python(Flask/Django)数据库:MySQL2.系统......
  • Vue3常见知识**MS【4】
    一、vue2和vue3的区别1、数据绑定原理不同  vue2:数据绑定是利用ES5的一个API:Object.definePropert()对数据进行劫持,结合发布订阅模式的方式来实现的。  vue3:使用了ES6的ProxyAPI对数据代理。相比vue2.x,使用proxy的优势如下:defineProperty只能监听某个属性,不能对......
  • springboot基于vue的汽车租赁系统
    目录摘要 1Abstract 1目录 21绪论 41.1研究背景与意义 41.2国内外研究现状 41.3研究内容 51.4论文结构 51.5本章小结 52理论基础 62.1B/S模式 62.2IDEA开发环境 62.3MySQL数据库 62.4Java语言 72.5本章小结 73需求分析 83.1功能需求分......
  • vue获取屏幕的实时 宽度 / 高度
    mounted(){constthat=this;window.onresize=()=>{return(()=>{window.screenWidth=document.documentElement.clientWidth;//实时宽度window.screenHeight=document.documentElement.clientHeight;//实时高度......
  • vue3 常用的几种组件通讯方式
    vue3常用的几种组件通讯方式,大致如下Props/EmitPinia事件总线(mitt)Provide/Inject浏览器本地存储 1.Props/Emit注释:prop属性名称/方法名称的格式,采用 camelCase 与 kebab-case。 1.1props(1)上游组件设置 prop 值(通过v-bind或冒号) 或者 (2)下游......