Vue3 完美实现深拷贝

---

一、问题背景

在复制表单之后，对表单进行修改，发现所有表单的值都同时改变，分析：表单没有进行深拷贝，而是引用的其它表单的值。

在这篇文章记录了 Vue2 实现深拷贝：Vue 双重v-for渲染表单，再复制表单编辑之深拷贝

在 Vue3 中，仍然可以和 Vue2 使用 require('lodash').cloneDeep 类似的方式来进行深拷贝。Vue3 的模块系统和 Vue2 相比没有根本性的变化，它依然支持CommonJS的require语法（尽管在使用如Vite这样的现代前端工具时，ES模块导入import是更推荐的方式）。

二、安装lodash

如果你还没有安装 lodash ，可以通过 npm 或 yarn 来安装：

npm install lodash
# 或者
yarn add lodash

三、Vue3实现完美深拷贝

使用 import 代替 require，你可以这样使用 lodash 的 cloneDeep 函数：

import cloneDeep from 'lodash/cloneDeep';const obj = { a: 1, b: { c: 2 } };
const newObj = cloneDeep(obj);

这种方式更加现代，也是目前大多数JavaScript项目推荐的做法。

四、非外部库非完美的实现深拷贝

虽然 lodash 的 cloneDeep 是一个非常强大且通用的深拷贝函数，但在某些情况下，你可能不需要引入外部库来实现深拷贝。例如，如果你要拷贝的对象只包含JSON兼容的数据类型（即没有函数、正则表达式对象、日期对象等），你可以使用原生的JSON方法来实现深拷贝：

const obj = { a: 1, b: { c: 2 } };
const newObj = JSON.parse(JSON.stringify(obj));

请注意，这种方法有其局限性，它不能正确处理非JSON兼容的数据类型，如上所述。