【vue3】vue3- 组合式 API 中实现深拷贝

作者：Sam9029

2022 年 9 月 13 日
四川
本文字数：1430 字
阅读完需：约 5 分钟

🦖我是 Sam9029，一个前端
Sam9029 的 InfoQ 主页:Sam9029 (infoq.cn)
**🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**

【Vue3】Vue3 中实现响应式数据深拷贝（针对 ref 和 reactive）

关于浅拷贝与深拷贝的基础知识可参考

【JS学习】–深拷贝与浅拷贝_Sam9029的博客-CSDN博客

关于 ref 和 reactive 的基础知识可参考

【JS学习】–深拷贝与浅拷贝_Sam9029的博客-CSDN博客

在 Vue3 项目使用中响应式数据（主要是引用数据类型）进行深拷贝，遇到了一些问题，也收获一些经验方法，主要介绍在 vue3 项目中使用深拷贝的方法以及注意事项

一：JSON 序列化
二：for……in 深拷贝手写函数

❗特别注意！不能使用 JS 的自带 APIstructuredClone() 会使得 Vue 抛出报错，（目前不知道为什么无法使用，暂时记住不要使用即可）
其他待发现方法🤑

（本文浅解，存在诸多不足，各种细节还有待完善）

🦁方法一：JSON 序列化 JSON.parse(JSON.stringify(Obj))

❗注意，JSON 序列化无法拷贝函数（一般也不会写函数进去）
❗特别注意，JSON 序列化会忽略属性值为 undefined 的属性
其他缺点参考文章【JS学习】–深拷贝与浅拷贝_Sam9029的博客-CSDN博客

实例

<script setup>import {ref,reactive} from 'vue'let refObj = ref({  data:[1,2],  meta:{    data:1  },  undefined:undefined})
console.log(refObj.value)  //24行console.log(JSON.parse(JSON.stringify(refObj.value)))    //25行</script>

复制代码

结果

ref 定义的对象是由 Proxy 代理的，所有的值须在 Target 中查看
可有图知，undefined 属性在深拷贝时丢失了

🦁方法二：`for……in` 手写深拷贝函数 (若需要同时拷贝函数，值为 undefined 的属性)

此方法可拷贝函数以及值为 undefined 的属性

实例

<script setup>import {ref,reactive} from 'vue'
let refObj = ref({  data:[1,2],  meta:{    data:1  },  undefined:undefined,  null:null})

console.log("元数据====",refObj.value)console.log("JSON序列化拷贝====",JSON.parse(JSON.stringify(refObj.value)))console.log("手写深拷贝====",deepCopy(refObj.value))

 function deepCopy(obj) {     //判断 传入对象 为 数组 或者 对象     var result = Array.isArray(obj) ? [] : {};     // for in 遍历     for (var key in obj) {         // 判断 是否 为自身 的属性值（排除原型链干扰）         if (obj.hasOwnProperty(key)) {             // 判断 对象的属性值 中 存储的 数据类型 是否为对象             if (typeof obj[key] === 'object') {                 // 递归调用                 result[key] = deepCopy(obj[key]);   //递归复制             }              // 不是的话 直接 赋值 copy             else {                 result[key] = obj[key];             }         }     }     // 返回 新的对象     return result; }</script>

复制代码

结果

❗特别注意！

不能使用 JS 的自带 APIstructuredClone() 会使得 Vue 抛出报错，（目前不知道为什么无法使用，暂时记住不要使用即可）

上诉谈论使用了 ❗ref 定义的响应式数据（引用数据类型）的深拷贝进行说明，❗同理对于 reactive 定义的响应式数据的同样有效！！！

🦖我是 Sam9029，一个前端，坚信`应无所往`

文章若有错误，敬请指正🙏
**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**
Sam9029 的

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/a99bd7ca99866c2c784bf86b9】。文章转载请联系作者。

Sam9029

关注

庸俗 2022.09.03 加入

好色

发布

暂无评论

创作场景

【vue3】vue3- 组合式 API 中实现深拷贝

【Vue3】Vue3 中实现响应式数据深拷贝（针对 ref 和 reactive）

🦁方法一：JSON 序列化 JSON.parse(JSON.stringify(Obj))

结果

🦁方法二：for……in 手写深拷贝函数 (若需要同时拷贝函数，值为 undefined 的属性)

结果

❗特别注意！

🦖我是 Sam9029，一个前端，坚信应无所往

Sam9029

评论

🦁方法二：`for……in` 手写深拷贝函数 (若需要同时拷贝函数，值为 undefined 的属性)

🦖我是 Sam9029，一个前端，坚信`应无所往`