vue深拷贝汇总

• 序列化方法

序列化成字符串，之后在反序列化成对象

var objold = {a:1};
var newObj = JSON.parse(JSON.stringify(objold))

• 扩展运算符（...）

ES6语法

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

• 遍历

在jquery为主流时应用的方法，目前本人倾向于用扩展运算符，毕竟代码比较优雅。😄

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;//返回深度克隆后的对象
}

• Object.assign()

此方法看同事写的时候用的频率挺高，且在网上看到过此类的面试题，如下
问：Object.assign()是浅拷贝还是深拷贝？
先上一波官方定义:

什么是深拷贝、浅拷贝？

• 对象的浅拷贝：浅拷贝是对象共用的一个内存地址，对象的变化相互影响。
• 对象的深拷贝：简单理解深拷贝是将对象放到新的内存中，两个对象的改变不会相互影响。

object.assign定义

• Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象.
• Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 注意：如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

实例验证

const obj = {'name': 'qiu', 'children': {'a':"1"}};
const objcopy = Object.assign({}, obj);
objcopy.name="liang";
objcopy.children.a="2";
console.log('obj', obj);	//name: "qiu" grade: {chi: "2"}
console.log('objcopy', objcopy);//name: "liang" grade: {chi: "2"}

官方描述：Object.assign()拷贝的只是属性值，假设源对象的属性值是一个指向对象的引用，那么它也只拷贝那个引用值

个人简述：如上方当打印结果，拷贝的是引用值时，那么实现到浅拷贝到效果（也就是对象共用的一个内存地址，对象的变化相互影响）.如果是普通类型，如string、number则为深拷贝