（浅拷贝，深拷贝）复制数组元素时，修改被复制的元素时，另一个元素会跟着变化

copy(item) {
            
              this.viewModel.push(item)
        },

复制数组，将item元素push到this.viewModel数组中实现复制，但是编辑复制元素时原本的元素会更着变化。直接push进去是浅拷贝了item,因此尝试将item深拷贝一下再push.

深拷贝的几种方式

1.使用 JSON 方法：

//测试用例
let originalObject = { a: 1, b: { c: 2 } };
let copiedObject = JSON.parse(JSON.stringify(originalObject));
copiedObject.b.c = 3;
console.log(originalObject); // { a: 1, b: { c: 2 } }
console.log(copiedObject); // { a: 1, b: { c: 3 } }

这种方法简单易用，但有一些限制，比如无法处理函数、循环引用等。 

2.使用递归方法

//测试用例
function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    let newObj = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        newObj[key] = deepCopy(obj[key]);
    }
    return newObj;
}
let originalObject = { a: 1, b: { c: 2 } };
let copiedObject = deepCopy(originalObject);
copiedObject.b.c = 3;
console.log(originalObject); // { a: 1, b: { c: 2 } }
console.log(copiedObject); // { a: 1, b: { c: 3 } }

 3.使用第三方库

如果您不想自己实现深拷贝函数，可以使用第三方库如 Lodash 的 _.cloneDeep() 方法来进行深拷贝。

npm install lodash

// 在vue.js中引入 lodash
import lodash from 'lodash';

// 在需要的地方使用 cloneDeep 方法
let clonedObj = lodash.cloneDeep(obj);

4.使用Object.assign()

//测试用例
let originalObject = { a: 1, b: { c: 2 } };
let copiedObject = Object.assign({}, originalObject);
copiedObject.b.c = 3;
console.log(originalObject); // { a: 1, b: { c: 2 } }
console.log(copiedObject); // { a: 1, b: { c: 3 } }

 Object.assign() 只会进行浅拷贝，对于嵌套对象仍然是浅拷贝。

5.使用structuredClone()

在浏览器环境中，并且需要深拷贝可序列化的对象，可以使用 structuredClone() 方法

//测试用例
let originalObject = { a: 1, b: { c: 2 } };
let copiedObject = structuredClone(originalObject);
copiedObject.b.c = 3;
console.log(originalObject); // { a: 1, b: { c: 2 } }
console.log(copiedObject); // { a: 1, b: { c: 3 } }

因为我是在pc端最后选择了使用structuredClone()方法。

在vue项目中直接使用structuredClone()方法虽然不影响使用但是会报错。所以需要先定义。

import Vue from 'vue'

const structuredClonePlugin = {
    install(Vue) {
        Vue.prototype.$structuredClone = function (obj) {
            return JSON.parse(JSON.stringify(obj))
        }
    }
}

// 在 Vue 实例中使用
Vue.use(structuredClonePlugin)

最后调用structuredClonePlugin()实现。

//复制拷贝
copy(item) {
              let copiedObject = this.$structuredClone(item)
              this.viewModel.push(copiedObject)
        },