vue3 动态组件和异步组件同时使用的时候，发现页面一旦元素发生变化，就会导致子组件重新触发mounted？

Question

父组件

<template>
  <div>
    <component :is="ddd('a')"></component>
    <div v-if="show">其他元素</div>
    <div @click="show = !show">点击</div>
  </div>
</template>
<script setup lang="ts">
import { defineAsyncComponent } from "vue";
//这里的name必须由外面传递
const ddd = (name) => {
  return defineAsyncComponent(
    async () => await import(`./${name}.vue`),
  );
};
const show = ref(false)
</script>

子组件：

<script setup lang="ts">
import { onMounted } from "vue"
onMounted(() => {
  console.log('触发mounted')
})
</script>

<template>
  <p class="read-the-docs">测试1</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

导致子组件mounted一直触发的原因是什么？keepAlive好像也没有作用？
在线demo

Answer 1

ddd改成静态对象，不然每次都会返回一个新的构造器，VNodeType不一致，组件就会重新走一遍unmount、mount

Answer 2

无意间发现了一个解决方法，就是将 <component :is="ddd()"></component>这一部分全新封装到一个组件中，然后直接引入这个组件就好了。如果有更好的方法，可以帮忙补充下，谢谢。

Answer 3

<template>
  <div>
    <component :is="ddd"></component>
    <div v-if="show">其他元素</div>
    <div @click="show = !show">点击</div>
  </div>
</template>
<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue'
const ddd = (() => defineAsyncComponent(() => import('./a.vue')))()

const show = ref(false)
</script>