返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue对象的深度克隆方式
  • 439
分享到

vue对象的深度克隆方式

2024-04-02 19:04:59 439人浏览 安东尼
摘要

目录Vue对象的深度克隆方法1方法2方法3vue克隆对象时遇到的问题vue对象的深度克隆 方法1 通过js序列化,将js转换成字符串,然后再将字符串转换成js对象 var olbOb

vue对象的深度克隆

方法1

通过js序列化,将js转换成字符串,然后再将字符串转换成js对象

var olbObj = {a:1};
var str = JSON.stringify(obj); //序列化对象
var newobj = JSON.parse(str); //还原
//相当于
var newObj = JSON.parse(JSON.stringify(olbObj ))

方法2

es6语法对象展开运算符进行对象的展开赋值

var a = {a:0}
var b = {...a}

方法3

进行对象的遍历复制,对 对象的每一条属性进行复制,这样就能进行对象的深度克隆

function newobj(obj) {
  var str, newobj = obj.constructor === Array ? [] : {};
  //constructor 属性返回对创建此对象的数组函数的引用。创建相同类型的空数据
  if (typeof obj !== 'object') {
    return;
  } else {
    for (var i in obj) {
      if (typeof obj[i] === 'object'){//判断对象的这条属性是否为对象
        newobj[i] = newObj(obj[i]);//若是对象进行嵌套调用
      }else{
        newobj[i] = obj[i];
      }
    }
  }
  return newobj;//返回深度克隆后的对象
}

vue克隆对象时遇到的问题

我们知道 当我们需要深克隆一个对象 或者数组时 改变这个得到的数据,原数据保持不变 比较简单的用到的函数基本都是

let b = JSON.parse(JSON.stringify(a))

但是假如我们克隆一个vue响应式对象时 发现用这个方法没啥用

所以需要一个工具函数老深克隆

//深克隆 
export const deepClone = (source) => {
  var sourceCopy = source instanceof Array ? [] : {}
  for (var item in source) {
    sourceCopy[item] = typeof source[item] === 'object' ? deepClone(source[item]) : source[item]
  }
  return sourceCopy
}
let b = deepClone (a)

这样就得到响应式的啦

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue对象的深度克隆方式

本文链接: https://lsjlt.com/news/167106.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue对象的深度克隆方式
    目录vue对象的深度克隆方法1方法2方法3vue克隆对象时遇到的问题vue对象的深度克隆 方法1 通过js序列化,将js转换成字符串,然后再将字符串转换成js对象 var olbOb...
    99+
    2024-04-02
  • java 对象的克隆(浅克隆和深克隆)
    java 对象的克隆一、对象的浅克隆(1)需要克隆类需要重写Object类的clone方法,并且实现Cloneable接口(标识接口,无需实现任何方法) (2)当需要克隆的对象中维护着另外一个引用对象,浅克隆不会克隆另外一个引用对下,而是直...
    99+
    2023-05-31
    java 对象 克隆
  • Java引用对象深度克隆的方法是什么
    在Java中,要实现对象的深度克隆,你可以使用以下方法之一:1. 实现`Cloneable`接口并重写`clone()`方法:```...
    99+
    2023-09-27
    Java
  • JavaScript如何实现多级对象的深度克隆
    这篇文章给大家分享的是有关JavaScript如何实现多级对象的深度克隆的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。多级对象的深度克隆要深度克隆多级对象,可以遍历每个属性,并检查当前属性是否包含对象。如果是,则...
    99+
    2023-06-27
  • 浅析Java中clone()方法浅克隆与深度克隆
       现在Clone已经不是一个新鲜词语了,伴随着“多莉”的产生这个词语确实很“火”过一阵子,在Java中也有这么一个概念,它可以让我们很方便的“制造”出一个对象的副本来,下面来具体看看Java中的Clone机制是如何工...
    99+
    2023-05-31
    java clone 浅克隆
  • Cloneable接口的作用与深入理解深度克隆与浅度克隆
    Cloneable接口的作用是标识一个类可以被克隆。当一个类实现了Cloneable接口,就表示该类可以创建一个与自身相同的对象。深...
    99+
    2023-09-13
    Cloneable
  • JAVA对象创建与对象克隆的方法
    这篇文章主要介绍了JAVA对象创建与对象克隆的方法的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JAVA对象创建与对象克隆的方法文章都会有所收获,下面我们一起来看看吧。一、对象的4种创建方式new 创建反射克隆...
    99+
    2023-06-29
  • java克隆对象的方法有哪些
    在Java中,克隆对象的方法有以下几种:1. 实现Cloneable接口并重写clone()方法:该方法是Object类中的方法,需...
    99+
    2023-09-25
    java
  • Java基础:对象的克隆(复制)
    假如想复制一个简单变量。很简单: int apples = 5;int pears = apples; 不仅int类型,其它七种原始数据类型(boolean,char,byte,short,float,double.long)同样适用于该类...
    99+
    2023-09-26
    数据结构
  • java克隆对象实现的方法有哪些
    在Java中,有以下几种方法可以实现对象的克隆:1. 实现Cloneable接口并重写clone()方法:这是最常见和最简单的方式。...
    99+
    2023-08-24
    java
  • Java克隆对象的特性是什么
    本篇内容介绍了“Java克隆对象的特性是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在java面向对象的编程当中,要复制引用类型的对象...
    99+
    2023-06-17
  • JavaScript数组及非数组对象的深浅克隆详解原理
    目录什么是浅克隆、深克隆1.对数组进行克隆1.1 浅克隆1.2 深克隆2.对非数组对象进行克隆2.1 浅克隆2.2 深克隆3.整合深克隆函数什么是浅克隆、深克隆 浅克隆:直接将存储在...
    99+
    2024-04-02
  • VB.NET对象克隆的主要思想是什么
    VB.NET对象克隆的主要思想是什么,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。VB.NET编程语言中对对象的操作是比较重要的一个操作技巧,对于一个具有面向对...
    99+
    2023-06-17
  • 如何解析Java语言的对象克隆特性
    这篇文章将为大家详细讲解有关如何解析Java语言的对象克隆特性,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。在Java中传值及引伸深度克隆的思考中,我们讲过引申到克隆技术Java中的所有对象...
    99+
    2023-06-17
  • JavaScript中合并和克隆对象的示例分析
    小编给大家分享一下JavaScript中合并和克隆对象的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!当我们想要复制原始值和引用值(对象)时,它们的行为会大不相同。原始值我们假设一个变量 name 具有一个与之关联...
    99+
    2023-06-15
  • vue对象复制方式(深拷贝,多层对象拷贝方式在后面)
    目录vue对象复制更新我的理解vue对象复制的坑--对象深度拷贝错误描述解决办法vue对象复制 使用:es6中的“对象扩展运算符 ”,如下 // 对象...
    99+
    2024-04-02
  • Javascript深度克隆中的循环引用问题怎么解决
    这篇文章主要介绍“Javascript深度克隆中的循环引用问题怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Javascript深度克隆中的循环引用问题怎么...
    99+
    2024-04-02
  • vue深度优先遍历多层数组对象方式(相当于多棵树、三级树)
    目录深度优先遍历多层数组对象比如树结构是这样的vue遍历包含数组的对象请求来拿到后数据格式是下面这种最终在html中这样遍历深度优先遍历多层数组对象 这个方法如果是对于下面的三级树的...
    99+
    2024-04-02
  • vue中对象的赋值Object.assign({},row)方式
    目录对象的赋值Object.assign({}, row)Object.assign()需要注意的一个小知识点对象的赋值Object.assign({}, row) 复制功能,想单独...
    99+
    2024-04-02
  • C++中的类与对象深度解析
    目录初始化列表引论初始化列表explicit关键字引论explicit关键字使用static成员 友元引论友元内部类基础概念内部类的使用补充析构顺序例题总结初始化列表 引论...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作