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

<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>

Answer 2

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

Answer 3

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