vue对象深拷贝(避免对象赋值,改变一个对象的值,另一个对象也变化)

对象直接赋值时,例如

let b = { name: 'name', age: 12}

let a=b,

a.age = 13

console.log(b.age)  // 13

由此可见,当改变 a 的属性值时,b也会随之改变,因为这是一个引用传递而不是值传递,a和b指向的是同一个内存地址,修改a后b所指向的地址的值也会发生改变。

如果我们不想让被赋值的对象跟着联动变化时,需使用深拷贝的方式

1. 创建一个js文件,deepclone.js

/**
 * 对象深拷贝
 */
export const deepClone = data => {
  var type = getObjType(data)
  var obj
  if (type === 'array') {
    obj = []
  } else if (type === 'object') {
    obj = {}
  } else {
    // 不再具有下一层次
    return data
  }
  if (type === 'array') {
    for (var i = 0, len = data.length; i < len; i++) {
      obj.push(deepClone(data[i]))
    }
  } else if (type === 'object') {
    for (var key in data) {
      obj[key] = deepClone(data[key])
    }
  }
  return obj
}

2. 引入并使用

import { deepClone } from "deepClone.js";

this.cloneData= deepClone(this.data)
原文地址:https://www.cnblogs.com/hechen-xuan/p/15206132.html