揭秘 Vue3 神奇的 defineAsyncComponent异步组件！

文章预览

 前言 在上一篇 给我5分钟，保证教会你在vue3中动态加载远程组件 文章中，我们通过 defineAsyncComponent 实现了动态加载远程组件。这篇文章我们将通过debug源码的方式来带你搞清楚 defineAsyncComponent 是如何实现异步组件的。注：本文使用的vue版本为 3.4.19 看个demo 还是一样的套路，我们来看个 defineAsyncComponent 异步组件的demo。 本地子组件 local-child.vue 代码如下：    < p > 我是本地组件 p > < /template> 异步子组件 async-child.vue 代码如下：    < p > 我是异步组件 p > < /template> 父组件 index.vue 代码如下：    < LocalChild  />    < button  @ click = "showAsyncChild = true" > load async child button >    < AsyncChild   v-if = "showAsyncChild"  /> < /template>
import { defineAsyncComponent, ref } from "vue";
import LocalChild from "./local-child.vue";