vue3修改弹窗的部分值选择后不保存，再次打开表明的是上次选择的值，而不是数据库的值

刚在写一个页面弹窗时，部分值选择后不保存，再次打开显示的是上次选择的值，而不是数据库的值。

原因：1.Vue3是响应式框架，数据变更会自动更新视图

           2.vue3浅的拷贝弊端

详解：1.vue3是是响应式框架，数据变更会自动更新视图，此时会修改全部数据，若没浅拷贝，则会修改任意值，不保存再次打开都会显示上次的值。

2.vue3浅的拷贝弊端，浅拷贝只会改变数据的第一层数据，下面的子数据层不会改变。

解决办法，采取深拷贝

// 编辑
const handleEdit = (item) => {
// item.isEdit = true;
// inputValue = item.title;
console.log('item=', item);
// item.llm.model_name = 'deepseek-ai/DeepSeek-R1'
console.info(`~~~~~~~~~itemitemitemitem~~~~~~~~~`, item)
const  itemShow = JSON.parse(JSON.stringify(item));// JSON序列化方法 深拷贝
openModal(true, {
data: itemShow,
info: 'info',
isUpdate: true,
});
};

在Vue中实现深拷贝主要有以下三种常用方式：

1. JSON序列化方法

通过JSON.parse(JSON.stringify(obj))实现，这是最简单的深拷贝方式。其原理是将对象转为JSON字符串再解析为新对象，但会丢失函数、undefined等非JSON兼容的数据类型。

上面我的对象就是个json，所以就采用这种简单的方法了

示例代码：

javascriptCopy Code

const obj = {a: 1, b: {c: 2}}; const copy = JSON.parse(JSON.stringify(obj));

2. Lodash库方法

使用Lodash的_.cloneDeep方法，能处理复杂数据类型（包括函数、Date对象等），但需要引入第三方库13。

安装及使用：

bashCopy Code

npm install lodash

javascriptCopy Code

import _ from 'lodash'; const copy = _.cloneDeep(originalObj);

3. 递归函数实现

自定义递归函数可灵活处理各种情况，但实现复杂度较高。基础实现需处理对象和数组类型，并通过递归遍历属性24。

示例实现：

javascriptCopy Code

function deepClone(obj) {
if (obj === null || typeof obj !== 'object') return obj;
const result = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
result[key] = deepClone(obj[key]);
}
}
return result;
}

方法对比

方法	优点	缺点
JSON序列化	简单易用，适合简单对象	无法处理函数、循环引用等特殊情况314
Lodash库	功能全面，支持复杂数据类型	需引入外部依赖34
自定义递归函数	可定制化，灵活性高	实现复杂，需处理边界情况24