Vue父子组件传值的一些坑

/**
 * 对象的浅拷贝
 */
var obj1 = {
 name:'wenyuan',
 age: 22
}
var obj2 = obj1;
obj2['job'] = 'coder';
console.log(obj1); //Object {name: "wenyuan", age: 22, job: "coder"}
console.log(obj2); //Object {name: "wenyuan", age: 0, job: "coder"}


/* ------------------------- 华丽的分割线 ------------------------- */


/**
 * 数组的浅拷贝
 */
var arr1 = [1, 2, 3, '4'];
var arr2 = arr1;
arr2[1] = "test"; 
console.log(arr1); // [1, "test", 3, "4"]
console.log(arr2); // [1, "test", 3, "4"]

/**
 * 对象的浅拷贝
 * jQuery的 $.extend(a,b) 或 $.extend({},a,b)
 */
var obj1 = {
 name:'wenyuan',
 age: 22,
 social: {
  blog: 'www.wenyuanblog.com'
 },
 skills: ['js', 'html', 'css', 'python']
}
var obj2 = $.extend({},obj1);
console.log(obj1 === obj2) // 输出false，说明外层数组拷贝的是实例
console.log(obj1.social === obj2.social) // 输出true，说明对于Object类型的属性是拷贝引用
console.log(obj1.skills === obj2.skills) // 输出true，说明对于Array类型的属性是拷贝引用


/**
 * 对象的浅拷贝
 * ES6的 Object.assign() 和 对象扩展运算符...
 */
var obj1 = {
 name:'wenyuan',
 age: 22,
 social: {
  blog: 'www.wenyuanblog.com'
 },
 skills: ['js', 'html', 'css', 'python']
}
var obj2 = Object.assign({},obj1);
console.log(obj1 === obj2) // 输出false，说明外层数组拷贝的是实例
console.log(obj1.social === obj2.social) // 输出true，说明对于Object类型的属性是拷贝引用
console.log(obj1.skills === obj2.skills) // 输出true，说明对于Array类型的属性是拷贝引用
var obj3 = {...obj1};
console.log(obj1 === obj3) // 输出false，说明外层数组拷贝的是实例
console.log(obj1.skills === obj3.skills) // 输出true，说明对于Array类型的属性是拷贝引用
console.log(obj1.skills === obj3.skills) // 输出true，说明对于Array类型的属性是拷贝引用


/* ------------------------- 华丽的分割线 ------------------------- */


/**
 * 数组的浅拷贝
 * Array.prototype.slice()
 */
var arr1 = [{name: "wenyuan"}, {name: "Evan You"}];
var arr2 = arr1.slice(0);
console.log(arr1 === arr2); // 输出false，说明外层数组拷贝的是实例
console.log(arr1[0] === arr2[0]); // 输出true，说明其元素拷贝的是引用


/**
 * 数组的浅拷贝
 * Array.prototype.concat()
 */
var arr1 = [{name: "wenyuan"}, {name: "Evan You"}];
var arr2 = arr1.concat();
console.log(arr1 === arr2); // 输出false，说明外层数组拷贝的是实例
console.log(arr1[0] === arr2[0]); // 输出true，说明其元素拷贝的是引用


/**
 * 数组的浅拷贝
 * ES6的 Object.assign() 和 对象扩展运算符...
 * 由于数组是特殊的对象，所以ES6中的这种方式也可以用于数组
 */
var arr1 = [{name: "wenyuan"}, {name: "Evan You"}];
var arr2 = Object.assign([],arr1)
var arr3 = { ...arr1 };
console.log(arr1 === arr2); // 输出false，说明外层数组拷贝的是实例
console.log(arr1 === arr3); // 输出false，说明外层数组拷贝的是实例
console.log(arr1[0] === arr2[0]); // 输出true，说明其元素拷贝的是引用
console.log(arr1[0] === arr3[0]); // 输出true，说明其元素拷贝的是引用

/**
 * 对象的深拷贝
 * JSON.stringify()和JSON.parse()
 * 这种深拷贝最简单，但有其局限性，上文已经提到过了
 */
var obj1 = {
 name:'wenyuan',
 age: 22,
 social: {
  blog: 'www.wenyuanblog.com'
 },
 skills: ['js', 'html', 'css', 'python']
}
var obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj1 === obj2) // 输出false，说明外层数组拷贝的是实例
console.log(obj1.social === obj2.social) // 输出false，说明对于Object类型的属性也是拷贝实例
console.log(obj1.skills === obj2.skills) // 输出false，说明对于Array类型的属性也是拷贝实例


/**
 * 对象的深拷贝
 * jQuery的 $.extend(true,a,b)
 */
var obj1 = {
 name:'wenyuan',
 age: 22,
 social: {
  blog: 'www.wenyuanblog.com'
 },
 skills: ['js', 'html', 'css', 'python']
}
var obj2 = $.extend(true,obj1);
console.log(obj1 === obj2) // 输出false，说明外层数组拷贝的是实例
console.log(obj1.social === obj2.social) // 输出false，说明对于Object类型的属性也是拷贝实例
console.log(obj1.skills === obj2.skills) // 输出false，说明对于Array类型的属性也是拷贝实例


/**
 * 对象的深拷贝
 * 也可以自己写一个函数实现，用递归+判断，注意别进入死循环就好
 * 这里不举例了，以前我整理过一篇常用工具类函数的博客，里面包含了深拷贝函数
 */


/**
 * 对象的深拷贝
 * lodash的_.cloneDeep
 */
var obj1 = {
 name:'wenyuan',
 age: 22,
 social: {
  blog: 'www.wenyuanblog.com'
 },
 skills: ['js', 'html', 'css', 'python']
}
var obj2 = _.cloneDeep(obj1);
console.log(obj1 === obj2) // 输出false，说明外层数组拷贝的是实例
console.log(obj1.social === obj2.social) // 输出false，说明对于Object类型的属性也是拷贝实例
console.log(obj1.skills === obj2.skills) // 输出false，说明对于Array类型的属性也是拷贝实例