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 作為外部傳遞），它現在可以正常工作。