shallowRef、markRaw的部分作用

[Vue warn]: Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with markRaw or using shallowRef instead of ref. Component that was made reactive: {__hmrId: ‘e58a13b7’, __scopeId: ‘data-v-e58a13b7’

• 通义灵码翻译结果：
  这个问题出现在 Vue 中当你不小心将一个组件实例通过 ref 变成了响应式对象时。这会导致不必要的性能开销，因为 Vue 会尝试追踪这个组件内部的变化来决定是否需要重新渲染，而这对于组件来说通常是不必要的。

• 直接通过ref或者reactive声明一个组件时，会报以上错误，使用shallowRef声明

1. 使用shallowRef声明

import SonA from "./components/A.vue";
import SonB from "./components/B.vue";
import SonC from "./components/C.vue";

import { shallowRef } from "vue";

const whichVue = shallowRef(SonA);

const data = shallowRef([
  {
    name: "A组件",
    com: SonA,
  },
  {
    name: "B组件",
    com: SonB,
  },
  {
    name: "C组件",
    com: SonC,
  },
]);

2. 使用markRaw标记后再使用

import { ref, reactive, markRaw } from "vue";
// 组件SonA被标记后，使用ref和reactive就不会有警告信息
markRaw(SonA);
const whichVue = ref(SonA);
const data = reactive([
  {
    name: "A组件",
    com: SonA,
  }
])