javascript 开发语言 ecmascript vue3 - vue3 中实现响应式数据(ref，reactive)深拷贝

本章节介绍vue3中对响应式数据的深拷贝，需要注意的是新拷贝的数据会失去响应式 ：更改数据时视图不会自动更新

只能用于渲染静态视图

深拷贝的两种方法：

一：JSON序列化

二：for……in 深拷贝手写函数

1，JSON序列化

注意: JSON序列化 无法拷贝函数（一般也不会写函数进去） JSON序列化 会忽略属性值为 undefined的属性

2，for…in 深拷贝封装函数

// 使用for...in 进行数据的深拷贝

const deepCopy = (object) => {

let result;

if (Object.prototype.toString.call(object) == "[object Object]") {

result = {};

} else if (Object.prototype.toString.call(object) == "[object Array]") {

result = [];

} else {

return "不符合深拷贝的数据类型";

}

// 遍历空对象或者是空数组 也就是要拷贝的对象

for (let key in object) {

if (typeof object[key] == "object") {

result[key] = deepCopy(object[key]);

} else {

result[key] = object[key];

}

}

return result;

};

好文阅读