vue3使用defineAsyncComponent报错

<!DOCTYPE html>
<html>
  <head>
    <title>Vue3 defineAsyncComponent Example</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <async-component></async-component>
    </div>

    <script type="module">

      const { defineAsyncComponent, createApp } = Vue;
      const ArticleList = defineAsyncComponent(() => import("./hello.vue"));
      console.log(ArticleList);
      let app = createApp({});
      app.component("AsyncComponent",ArticleList)
      app.mount("#app");
    </script>
  </body>
</html>

//hello.vue ·```javascript
<template>
  <h3>{{a}}</h3>

</template>
<script >
export default{
  data() {
    return {
      a:0
    }
  },
}

</script>
```  组件
<template>
  <h3>{{a}}</h3>

</template>
<script >
export default{
  data() {
    return {
      a:0
    }
  },
}

</script>

vue3 vue javascript html

爸爸

11 声望

暂无个人描述~

0 人点赞

爸爸

11 声望

最佳答案

已经决绝：

file

解决方法，defineAsyncComponent(httpVueLoader("./hello.vue"))

在vue2中可以直接使用httpVueLoader引入，在vue3中则需要 defineAsyncComponent(httpVueLoader("./hello.vue"))

在vue3和vue2中使用import 直接引入也会报错，（未解决；）

chatGPT解释

问：为什么vue3中使用httpVueLoader 需要配合defineAsyncComponent使用，才能显示出来？为什么使用defineAsyncComponent时候直接加上import 引入无法显示且会报错

答： httpVueLoader 是用于动态加载 Vue 单文件组件的工具，而 defineAsyncComponent是 Vue 3 提供的异步组件加载方法，可以把组件的加载延迟到组件被实际渲染时再去加载。这两个方法都是用于组件动态加载的，但是它们的作用不同。

在使用 httpVueLoader 加载组件时，需要使用 defineAsyncComponent 进行包装后再使用。这是因为 httpVueLoader 加载的组件代码是动态加载的，需要在组件实际渲染时才执行，而 defineAsyncComponent 可以延迟组件的加载时机，以避免组件未加载完成就被渲染导致的错误。

如果你直接使用 import 引入组件，不需要使用 defineAsyncComponent 包装，因为 import 是同步加载组件，而不是动态异步加载，组件会在导入时加载完成，不需要等到实际渲染时再去加载。如果你直接使用 import 引入组件却报错无法显示，可能是其他原因导致的错误，建议检查代码逻辑和错误信息以定位问题。

1年前评论

讨论数量: 6

Egoist-Berserker

课程读者 5 声望

看着感觉有点奇怪，页面里你只是挂载了这个组件，但是没有直接使用。正常使用延迟注册组件后，例如：javascript const AsyncComponent = defineAsyncComponent(() => import('./path/to/MyComponent.vue')); <template> <AsyncComponent /> </template> 至少也要使用一下才对吧。

1年前评论

爸爸（楼主）

在app.component("AsyncComponent",ArticleList)处已经注册使用了

爸爸（楼主）

在 id 为 app 的 div 里面使用了还是报错

爸爸

11 声望

在 id为app的div里面使用了还是报错

file

1年前评论

翟宇鑫

课程读者 286 声望 / Web 开发工程师 @ 自由职业者

这样的写法我感觉需要构建工具的支持

file

1年前评论

爸爸

11 声望

已经决绝：

file

解决方法，defineAsyncComponent(httpVueLoader("./hello.vue"))

在vue2中可以直接使用httpVueLoader引入，在vue3中则需要 defineAsyncComponent(httpVueLoader("./hello.vue"))

在vue3和vue2中使用import 直接引入也会报错，（未解决；）

chatGPT解释

问：为什么vue3中使用httpVueLoader 需要配合defineAsyncComponent使用，才能显示出来？为什么使用defineAsyncComponent时候直接加上import 引入无法显示且会报错

答： httpVueLoader 是用于动态加载 Vue 单文件组件的工具，而 defineAsyncComponent是 Vue 3 提供的异步组件加载方法，可以把组件的加载延迟到组件被实际渲染时再去加载。这两个方法都是用于组件动态加载的，但是它们的作用不同。

在使用 httpVueLoader 加载组件时，需要使用 defineAsyncComponent 进行包装后再使用。这是因为 httpVueLoader 加载的组件代码是动态加载的，需要在组件实际渲染时才执行，而 defineAsyncComponent 可以延迟组件的加载时机，以避免组件未加载完成就被渲染导致的错误。

如果你直接使用 import 引入组件，不需要使用 defineAsyncComponent 包装，因为 import 是同步加载组件，而不是动态异步加载，组件会在导入时加载完成，不需要等到实际渲染时再去加载。如果你直接使用 import 引入组件却报错无法显示，可能是其他原因导致的错误，建议检查代码逻辑和错误信息以定位问题。

1年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

vue3使用defineAsyncComponent报错

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

vue3使用defineAsyncComponent报错

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录