VueJS中使用markRaw/shallowRef后动态组件无法渲染的问题

问题根源 #

你当前代码的核心问题有两个：

1. 在computed属性里执行异步操作：computed是同步计算属性，不适合处理import()这类异步逻辑。这会导致组件初始渲染时importedModule还是null，后续异步完成后虽更新了数据，但时序逻辑混乱，且每次computed触发都会重复发起导入请求。
2. 尽管用了markRaw处理组件，但异步逻辑的位置错误导致组件无法及时渲染。

修复方案 #

把异步导入逻辑移到生命周期钩子（比如mounted）中，同时用markRaw标记组件避免响应式转换，具体代码修改如下：

模板代码（无需改动）

<div class="card-content padding-horizontal padding-top">
    <div class="terms-block scrolling">
        <div ref="content">
            <component :is="dynamicStatementComponent" />
        </div>
    </div>
</div>

脚本代码修改

import { markRaw } from 'vue' // 确保导入markRaw工具

export default {
    data() {
        return {
            importedModule: null
        }
    },
    computed: {
        dynamicStatementComponent() {
            return this.importedModule
        }
    },
    mounted() {
        // 替换为你的实际组件文件路径
        const filePath = './path/to/target-component.vue'
        
        import(filePath)
            .then((module) => {
                // 用markRaw标记组件，避免被Vue转为响应式对象
                this.importedModule = markRaw(module.default)
            })
            .catch((err) => {
                console.error('组件导入失败:', err)
            })
    }
}

额外优化（按需切换组件场景） #

如果需要根据条件动态切换不同组件，可以把filePath设为响应式变量，通过watch监听变量变化重新执行导入：

data() {
    return {
        importedModule: null,
        filePath: './path/to/default-component.vue'
    }
},
watch: {
    filePath(newPath) {
        if (!newPath) return
        import(newPath)
            .then(module => {
                this.importedModule = markRaw(module.default)
            })
            .catch(err => console.error('组件导入失败:', err))
    }
}

markRaw的作用是让Vue不对组件对象做响应式转换，彻底解决警告提到的性能开销问题，同时完全不影响组件正常渲染。

内容的提问来源于stack exchange，提问作者D.madushanka