未调用 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 实例运行（一个与我的包捆绑在一起，带有汇总，一个在脚本本身中导入），并且对于一个未知的原因，none 两个正在调用 hooks。

通过删除其中一个实例（实际上，在汇总构建配置中将 vue 作为外部传递）它现在运行良好。

未调用 Vue 3 动态加载的组件挂钩

Vue 3 dynamically loaded component hooks not called

import

async-await

vue.js