如何实现Vue对象的深度克隆方法？

本文共计507个文字，预计阅读时间需要3分钟。

目录 + Vue对象的深度克隆+方法1 + 方法2 + 方法3 + Vue克隆对象时遇到的问题 + Vue对象的深度克隆+方法1 + 通过JSON序列化，将JS对象转换为字符串，然后再将字符串转换成JS对象 + var olbObj={a: 1}; var str='JSO';

目录

• vue对象的深度克隆
• 方法1
• 方法2
• 方法3
• vue克隆对象时遇到的问题

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)

这样就得到响应式的啦

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。