vue深拷贝：1、使用JSON.parse()和JSON.stringify()；2、使用Lodash库；3、使用深拷贝函数（采用递归的方式）
文章目录
- 引言
-
- 三种方法的优缺点
- 在Vue中，实现数组的深拷贝
- I JSON.stringify和 JSON.parse的小技巧
-
- 深拷贝步骤
- 缺点：
- 案例1：向后端请求路由数据
- 案例2： 表单数据处理时复制用户输入的数据
- II 使用Lodash库
-
- 步骤
- 适用于复杂数据结构和需要处理循环引用的场景
- III 自定义的深拷贝函数（采用递归的方式）
-
- 示例代码
- 适用于需要特殊处理的场景
引言
深拷贝是指创建一个完全独立的副本，而不仅仅是引用原始数组的副本。
在Vue中，有几种方法可以实现对象的深拷贝：
- 使用JSON.parse()和JSON.stringify()
- 使用Lodash库
- 使用深拷贝函数
三种方法的优缺点
| 方法 | 优点 | 缺点 |
|---|---|---|
| JSON.parse()和JSON.stringify() | 简单易用，适合大多数情况 | 无法拷贝函数、undefined、Symbol，不支持循环引用 |
| Lodash库 | 功能强大，处理复杂结构 | 需要额外引入库 |
| 自定义深拷贝函数 | 灵活性高，可定制 | 编写和维护成本高，代码复杂 |
- 对于简单的场景，使用 JSON.parse() 和 JSON.stringify() 是一种快速便捷的方法；
- 对于复杂的场景，Lodash 库提供了强大的 cloneDeep 方法；
- 自定义深拷贝函数则适用于需要