写点什么

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

作者:Sam9029
  • 2022 年 9 月 13 日
    四川
  • 本文字数:1430 字

    阅读完需:约 5 分钟

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

🦖我是 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))

实例

<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
用户头像

Sam9029

关注

庸俗 2022.09.03 加入

好色

评论

发布
暂无评论
【vue3】vue3-组合式API中实现深拷贝_Vue_Sam9029_InfoQ写作社区