vue3动态组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3动态组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1 、可以通过 shallowRef 把可以把组件进行包裹

<template>
    <div>
        <el-button @click="setclick(son1)">1111</el-button
        ><el-button @click="setclick(son2)">2222</el-button
        ><el-button @click="setclick(son3)">3333</el-button>
        <component :is="cod" />
    </div>
</template>

<script setup>
/* eslint-disable*/
import { shallowRef } from "vue";
import son1 from "./son1.vue";
import son2 from "./son2.vue";
import son3 from "./son3.vue";
let cod = shallowRef(son1);
const setclick = (val) => {
    cod.value = val;
};
</script>

为什么用shallowRef 如果传入基本数据类型,那么shallowRef与ref的作用基本没有什么区别,也就是浅层的ref的内部值将会原样的存储和暴露,并不会被深层递归地转为响应式

当我们使用ref 会有提醒建议使用 shallowRef

vue3动态组件,vue.js,javascript,前端

在Vue3 setup 是通过组件实例切换

如果你把组件实例放到Reactive Vue会给你一个警告runtime-core.esm-bundler.js:38 [Vue warn]: 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. Component that was made reactive:

这是因为reactive 会进行proxy 代理而我们组件代理之后毫无用处节省性能开销推荐我们使用shallowRef 或者 markRaw 跳过proxy 代理

但是使用markRaw 时无效的

markRaw ：可以吧一个用reactive包裹的响应式变成不具备响应式的功能

相同功能有 toRaw 也同样可以吧响应式变成普通对象

区别： markRaw 趋向于可以把某个对象的某个属性改变成普通对象而toRaw 是全部 文章来源地址https://www.toymoban.com/news/detail-655893.html

到了这里，关于vue3动态组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！