vue 深拷贝

最新推荐文章于 2024-06-21 13:58:05 发布

weixin_53413136

最新推荐文章于 2024-06-21 13:58:05 发布

阅读量259

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53413136/article/details/131491703

版权

项目中遇到一个问题，接口返回数据后，赋值给form和oldForm，修改form的值时oldForm也会同步变化。为防止这种情况，尝试使用了JSON.parse(JSON.stringify())进行深拷贝，但并未奏效。实际上，这种方法仅适用于简单对象的第一层拷贝。解决方法是通过递归实现真正的深拷贝，确保修改一个对象不会影响到另一个。

摘要由CSDN通过智能技术生成

项目场景：

在接口返回后，将结果赋值给form 和 oldForm，改变form的值oldForm 也跟着变

问题描述

这里我还用json.parse()处理了下，就是怕出现改变form的值oldForm也跟着变，但没啥效果

 gethotspotInfo({ id: item.id }).then(res => {
        this.title = '编辑热点' 
        this.form = res.data
        this.oldForm = JSON.parse(JSON.stringify(this.form))
      })

原因分析：

使用json.parse(json.stringify())实现对简单数组或对象第一层的深拷贝

解决方案：

通过递归方式实现深拷贝

 function deepClone(obj) {
  var target = {};
  for (var key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      if (typeof obj[key] === 'object') {
        target[key] = deepClone(obj[key]);
      } else {
        target[key] = obj[key];
      }
    }
  }
  return target;
}