- 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; }
