为何报错无法异步渲染Vue组件？懒加载组件问题求助

你的代码里懒加载组件的语法有误，defineAsyncComponent本身就是用来创建异步组件的方法，不需要额外套一层箭头函数返回它。

你的错误代码： #

<template>
    <div class="container">
    <h1>Async testing</h1>
    <button @click="showModal=!showModal">show modal</button>
    <Modal v-if=showModal />
    </div>
</template>

<script>
import { defineAsyncComponent, ref } from 'vue';
    export default {
        components: {
          Modal: () => defineAsyncComponent(
            () => import('@/components/Modal.vue')
          )
        },
        setup(){
            const showModal = ref(false);
            return {
                showModal
            }
        }
    }
</script>

修正后的代码： #

把外层的箭头函数去掉，直接将defineAsyncComponent的返回值赋值给Modal组件：

<template>
    <div class="container">
    <h1>Async testing</h1>
    <button @click="showModal=!showModal">show modal</button>
    <Modal v-if="showModal" /> <!-- 给v-if表达式加引号，符合Vue规范 -->
    </div>
</template>

<script>
import { defineAsyncComponent, ref } from 'vue';
    export default {
        components: {
          Modal: defineAsyncComponent(() => import('@/components/Modal.vue'))
        },
        setup(){
            const showModal = ref(false);
            return {
                showModal
            }
        }
    }
</script>

错误原因： #

你原本的写法是让Modal指向一个返回异步组件创建函数的箭头函数，而非直接指向异步组件本身。Vue无法识别这种格式，因此抛出组件解析失败的错误。去掉外层箭头函数后，Modal就直接是defineAsyncComponent创建的异步组件实例，就能正常工作了。

另外模板里的v-if=showModal建议加上引号写成v-if="showModal"，虽然Vue在部分场景下允许省略引号，但加引号更符合语法规范，能避免潜在问题。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo