Vue 浅拷贝 深拷贝

浅拷贝 深拷贝 简单概括

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

浅拷贝

// 拷贝对象
{..objValue}
// 拷贝数组
[...arrValue]

深拷贝1 （不推荐）

// value为要拷贝对象
JSON.parse(JSON.stringify(value))

JSON.parse(JSON.stringify())复制时间对象、Error对象、正则表达式，函数，或者undefined等值，此方法就会出现问题

1. 如果json里面有时间对象，则序列化结果：时间对象=>字符串的形式
2. 如果json里有RegExp、Error对象，则序列化的结果将只得到空对象 RegExp、Error => {}
3. 如果json里有 function,undefined，则序列化的结果会把 function,undefined 丢失
4. 如果json里有NaN、Infinity和-Infinity，则序列化的结果会变成null
5. 如果json里有对象是由构造函数生成的，则序列化的结果会丢弃对象的 constructor
6. 如果对象中存在循环引用的情况也无法实现深拷贝

深拷贝2

使用 Lodash 中的 cloneDeep

官方文档

import { cloneDeep } from 'lodash-es'
// value为要拷贝对象
cloneDeep(value)