Vue3动态绑定组件警告处理

Vue received a Component which 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.

动态绑定组件

1、vue3动态组件展示使用的是官方提供的组件is方法：

<component :is="activeConmponent"></component>

2、当我们没有使用vue3的语法糖时，使用markRaw对组件进行包裹：

import Index "@/views/home/Index.vue";
import {
    
     ref, markRaw } from 'vue';
export default {
    
    
	conponents: {
    
    
		HomeIndex: markRaw(Index)
	},
	setup() {
    
    
		let activeConmponent = ref(HomeIndex);
	}
}

2、当我们使用vue3的语法糖时，使用shallowRef对组件进行声明：

import HomeIndex "@/views/home/Index.vue";
import {
    
     shallowRef } from 'vue';

let activeConmponent = shallowRef(HomeIndex);

这样就可以解决vue3组件的警告了。