Vue 3动态加载的组件钩子没有被触发

Question

我有这个（问题的缩写）单文件组件（vue 3.2.31）：

<template lang="pug">
.test Hello world!
</template>
<style lang="sass" scoped>
.test
  font-weight: bold
</style>
<script setup lang="ts">

onMounted(() => {
  console.log('Mounted');
});

</script>

它通过 vitejs 捆绑，导出为（比方说）NamedExport，并按需作为 base64 编码字符串在客户端导入。

const component = await defineAsyncComponent(async () => {

  // A module that exports multiple components.
  const module = await import(base64StringSentFromTheServer);

  // Choose one.
  return module['NamedExport']);

})

那么，结果必然是：

<component :is="component" />

它工作得很好，除了两件事，其中之一是没有调用钩子（在本例中为 onMounted ），另一个是样式导入器也没有被调用。

这是预期的行为，还是我错过了什么？是 <script setup> 编写负责组件的方式吗？

Answer 1

看来我有两个 Vue 实例正在运行（一个与我的包捆绑在一起，带有汇总，另一个在脚本本身中导入），并且由于未知的原因，这两个实例都没有运行调用挂钩。

通过删除其中一个实例（实际上，在汇总构建配置中将 vue 作为外部传递），它现在可以正常工作。