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组件的警告了。