Dynamisch geladene Komponenten-Hooks von Vue 3 werden nicht ausgelöst

Question

Ich habe diese (kurz für Frage) einzelne Dateikomponente (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>

Es wird über vitejs gebündelt, beispielsweise als NamedExport exportiert und bei Bedarf als base64-codierte Zeichenfolge auf der Clientseite importiert.

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

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

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

})

Dann muss das Ergebnis sein:

<component :is="component" />

Es funktioniert einwandfrei , bis auf zwei Dinge: Zum einen wird der Hook nicht aufgerufen (in diesem Fall onMounted) und zum anderen wird auch der Style-Importer nicht aufgerufen.

Ist das erwartetes Verhalten oder übersehe ich etwas? Ist <script setup> der Weg, verantwortungsvolle Komponenten zu schreiben?

Answer 1

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

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