使用defineAsyncComponent遇到的问题（一）

问题发现

如图所示，当我使用defineAsyncComponent引入一个异子步组件，然后我想通过模版引用的方式获取sidebar组件实例时出现问题，拿到了undefined

问题：无法在父组件的onMounted生命周期获取异步加载的子组件实例。

问题讨论

我们使用普通方法引入子组件时，父子组件的生命周期顺序是这样的（vue3 composition api）：

而当子组件为异步组件时，父子组件生命周期的顺序是这样的：

我们可以看到在父组件加载完毕后，才会开始创建子组件，因此我们自然不能在父组件的onMounted生命周期中获取到子组件实例。

问题解决

看到这个问题时，第一时间想到的解决办法就是定义一个事件，在子组件除非onMonuted生命周期时调用。

// 子组件
const emit = defineEmits(["onmounted"]);
onMounted(() => {
  emit("onmounted");
});

// 父组件
 <sideBar ref="sideBarRef" @onmounted="handleSideBarMounted"></sideBar>
 
 const sideBarRef = ref();
 const handleSideBarMounted = () => {
  console.log(unref(sideBarRef), "sideBarRef");
};

这样我们可以顺利拿到子组件实例

但是本人觉得这个办法不够方便，仅仅获取一个组件实例就需要多写许多代码。但是查看了官方文档，也在网上搜索了一下，没有发现有什么解决方案。如果有朋友路过希望能为小弟解惑