Vue中一行代码实现深拷贝

最新推荐文章于 2024-01-19 15:09:29 发布

LLtaishuai

最新推荐文章于 2024-01-19 15:09:29 发布

阅读量2.7k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42539854/article/details/123436633

版权

在Vue开发中，确保数据副本不会影响原始双向绑定数据是至关重要的。直接浅拷贝可能导致副本和原始数据同步变化，引起未预期的后果。为解决这个问题，可以使用JSON.parse(JSON.stringify())方法或递归方式实现深拷贝。递归深拷贝函数能处理复杂对象和循环引用，避免数据篡改风险。

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

应用场景

在vue开发过程中，我们可能会遇到要对双向绑定的数据拷贝一个副本来供我们使用，如果直接浅拷贝会造成一定的风险。比如：在拷贝后我们要更改副本，这是由于双向绑定的原因，之前的数据也会改变，会出现问题。这是新手容易忽略的地方。

解决方案

实现深拷贝

JSON

const obj1 = JSON.parse(JSON.stringify(obj2))

递归

// 判断是不是数组和对象
function isObject (o) {
  return Object.prototype.toString.call(o) === '[object Array]' || Object.prototype.toString.call(o) === '[object Object]'
}
// 实现深拷贝函数
// 利用Map数据结构来解决循环引用造成死循环的问题
function deepclone (o, hash = new Map()) {
  //判断类型，只适用于array和object
  if (!isObject(o)) {
    return o
  }
  // 判断循环引用
  if (hash.has(o)) {
    return hash.get(o)
  }
  const obj = Array.isArray(o) ? [] : {}
  hash.set(o, obj)
  for (const k in o) {
    if (isObject(o[k])) {
      obj[k] = deepclone(o[k], hash)
    } else {
      obj[k] = o[k]
    }
  }
  return obj
}