首页 > 其他分享 >vue 深拷贝

vue 深拷贝

时间:2023-12-12 11:11:22浏览次数:24  
标签:vue obj 对象 JSON key 拷贝 属性

方法一: cloneDeep

import { cloneDeep } from 'lodash-es'

// 直接使用
const items = cloneDeep(multipleSelection)

方法二: ​通过JSON.parse(JSON.stringify(obj))

优缺点
满足一般使用场景,用JSON.stringify把对象转成字符串,再用JSON.parse把字符串转成新的对象。
但这种方法的缺陷是会破坏原型链,并且无法拷贝属性值为function的属性

方法三:通过递归方式实现深拷贝

优缺点
比较全面的深拷贝,缺点是较为繁琐

//使用递归的方式实现数组、对象的深拷贝
function deepClone(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空,并且是对象或者是
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

注意:

Object.assign 是用于将一个或多个源对象的属性复制到目标对象中的方法。然而,需要注意的是,Object.assign 执行的是浅拷贝,而不是深拷贝。

浅拷贝意味着只有对象的属性被复制,而不是对象的嵌套属性。如果源对象的属性值是对象或数组,那么目标对象中的对应属性将保持对相同对象的引用,而不是复制这些对象的内容。

标签:vue,obj,对象,JSON,key,拷贝,属性
From: https://www.cnblogs.com/alioth01/p/17896348.html

相关文章

  • js 传参到 vue + 计算属性使用
    场景js中存储xAxisData=[......]、yAxisData=[......],想在vue中使用,但要求使用前转化成data存有若干个(x,y)的形式在改变xAxisData或yAxisData的任意一值时,都会反馈更新到vue的每一个调用了data的地方方法一:js中Cannotreadpropertiesofundefine......
  • 文件操作&深浅拷贝&异常处理
    文件操作【1】基本流程(1)文件操作操作打开读文件内容rwithopen('01.txt','r',encoding='utf-8')asf:data=f.read()print(data)打开写文件内容w#普通语句f=open('01.txt','w',encoding='utf-8')f.write(&#......
  • vitest&@vue/test-utils组件单元测试
    依赖"vitest":"0.34.6","@vue/test-utils":"2.4.3","axios-mock-adapter":"^1.22.0",示例import{mount}from"@vue/test-utils";import{test,vi}from"vitest";import{gl......
  • 介绍 Vue3 的常见目录结构
    当着手使用Vue3开发项目时,理解其目录结构至关重要。Vue3的文件组织和模块分隔方式直接关系到项目的可维护性和扩展性。本文将深入探讨Vue3的标准目录结构,并提供一些实用的指南和推荐做法。在Vue3项目中,通常会有以下一些常见的目录和文件:src目录:src 目录是Vue3项目的......
  • 介绍 Vue3 的常见目录结构
    当着手使用Vue3开发项目时,理解其目录结构至关重要。Vue3的文件组织和模块分隔方式直接关系到项目的可维护性和扩展性。本文将深入探讨Vue3的标准目录结构,并提供一些实用的指南和推荐做法。在Vue3项目中,通常会有以下一些常见的目录和文件:src目录:src 目录是Vue3项目的......
  • SpringBoot+Vue实现大文件分块上传
    1.项目背景由于用户需求,需要上传大量图片,只能通过上传压缩包的形式上传,可是压缩包过大时,又会出现上传超时的情况,故需要将压缩包分块上传,然后解压缩图片、若图片过大则再对图片进行压缩。2.分块上传分块上传我在用的时候发现有两种:第一种:分块合并接口全由后端接口生成;第二种:前端......
  • 介绍 Vue3 的常见目录结构
    当着手使用Vue3开发项目时,理解其目录结构至关重要。Vue3的文件组织和模块分隔方式直接关系到项目的可维护性和扩展性。本文将深入探讨Vue3的标准目录结构,并提供一些实用的指南和推荐做法。 在Vue3项目中,通常会有以下一些常见的目录和文件:src目录:src 目录是Vu......
  • 介绍 Vue3 的常见目录结构
    当着手使用Vue3开发项目时,理解其目录结构至关重要。Vue3的文件组织和模块分隔方式直接关系到项目的可维护性和扩展性。本文将深入探讨Vue3的标准目录结构,并提供一些实用的指南和推荐做法。 在Vue3项目中,通常会有以下一些常见的目录和文件:src目录:src 目录是Vu......
  • Vue + Element 实现按钮指定间隔时间点击
    1、业务需求需要加一个按钮,调用第三方API,按钮十分钟之内只能点击一次,刷新页面也只能点击一次2、思路加一个本地缓存的时间戳,通过时间戳计算指定时间内不能点击按钮3、实现1)vue页面<template><el-row:gutter="15"><el-col:span="4"><el-buttontype="danger"......
  • vue2项目webpack打包的优化策略,降低打包文件后的大小
    1.区分开发模式和打包模式的main.js入口文件首先,在项目的根目录下创建一个名为vue.config.js的文件(如果已存在,请跳过此步骤)。然后对于你的项目中的mian.js新建一个相同内容的js文件,然后将这2个mian.js文件分别命名为打包模式的入口文件:main-prod.js开发模式的入口文件:mian-dev.js......