🐱 个人主页：不叫猫先生
🙋‍♂️ 作者简介：2022年度博客之星前端领域TOP 2，前端领域优质作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！
💫优质专栏：vue3 + vite + TypeScript 从入门到实践
📢 资料领取：前端进阶资料可以找我免费领取
🔥 摸鱼学习交流：我们的宗旨是在工作中摸鱼，摸鱼中进步，期待大佬一起来摸鱼(文末有我wx或者私信)。

• markRow：标记一个对象，使其不能成为一个响应式对象。
• toRaw：将响应式对象（由 reactive定义的响应式）转换为普通对象。
• shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。
• shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

问题：为什么vue3需要对引入的组件使用markRow？
vue2中 is是通过组件名称切换的，vue3中setup是通过组件实例切换的。直接把组件实例放到reactive中代理，vue会发出警告。告知我们可以通过shallowRef 或者 markRaw 跳过proxy 代理。对组件实例进行响应式代理毫无意义，且浪费性能。

vue2

<template>
  <div>
    <component :is="A"></component>
  </div>
</template>

<script>
import A from './A';
export default {
  name: 'Home',
  data() {
    return {}
  },
  components: { A },
}

vue3

<template>
	<ul>
		<li
			v-for='(item,index) in tabList'
			:key='index'
			@click='change(index)'
		>
			{{ item.name }}
		</li>
	</ul>
	<keep-alive>
		<component :is="currentComponent"></component>
	</keep-alive>
</template>

<script setup>
import A from '../components/A.vue'
import B from '../components/B.vue'
import C from '../components/C.vue'
let tabList = reactive([
	{name:'组件A',com:markRaw(A)},
	{name:'组件B',com:markRaw(B)},
	{name:'组件C',com:markRaw(C)}
]);
let currentComponent = reactive({
	com:tabList[0]
});
const change = ( idx )=>{
	currentComponent = tabList[idx].com;
}