vue3 - vue3 中实现响应式数据(ref,reactive)深拷贝
vue3 中实现响应式数据(ref,reactive)深拷贝
·
本章节介绍vue3中对响应式数据的深拷贝,需要注意的是新拷贝的数据会失去响应式 :更改数据时视图不会自动更新
只能用于渲染静态视图
深拷贝的两种方法:
一:JSON序列化
二:for……in 深拷贝手写函数
1,JSON序列化
注意:
JSON序列化 无法拷贝函数(一般也不会写函数进去)
JSON序列化 会忽略属性值为 undefined的属性
<script setup>
import { reactive, ref} from "vue";
// 原数据
let list1 = ref([
{ name: "Eula", age: "18", isActive: false },
{ name: "Umbra", age: "17", isActive: false },
{ name: "Kaya", age: "19", isActive: false },
{ name: "Diluk", age: "19", isActive: false },
]);
// 深拷贝得来的数据
let list2 = JSON.parse(JSON.stringify(list1.value));
</script>
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;
};
更多推荐
所有评论(0)