本章节介绍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;
};