How many instances of r are there in:
Q: Динамический компонент во Vue3 Простой работающий пример динамического компонента Vue2
<template>
    <div>
        <h1>O_o</h1>
        <component :is=name/>
        <button @click=onClick>Click me !</button>
    </div>
</template>

<script>
    export default {
        data: () => ({
            isShow: false
        }),
        computed: {
            name() {
                return this.isShow ? () => import(./DynamicComponent) : ;
            }
        },
        methods: {
            onClick() {
                this.isShow = true;
            }
        },
    }
</script>

Все работает, все замечательно. Начал пробовать как это будет функционировать с Composition API.
<template>
    <div>
        <h1>O_o</h1>
        <component :is=state.name/>
        <button @click=onClick>Click me !</button>
    </div>
</template>

<script>
    import {ref, reactive, computed} from vue

    export default {
        setup() {
            const state = reactive({
                name: computed(() => isShow ? import(./DynamicComponent.vue) : )
            });

            const isShow = ref(false);

            const onClick = () => {
                isShow.value = true;
            }

            return {
                state,
                onClick
            }
        }
    }
</script>

Запускаем, на экране компонент не появляется, хотя ошибок никаких не отображается. Никто с бета версией еще не возился?

A: Все в template оставляем как во Vue2
<template>
    <div>
        <h1>O_o</h1>
        <component :is=name/>
        <button @click=onClick>Click me !</button>
    </div>
</template>

Меняем только в script применяя defineAsyncComponent
Подробнее про defineAsyncComponent можно узнать здесь
https://labs.thisdot.co/blog/async-components-in-vue-3
или на официальном сайте
https://v3.vuejs.org/api/global-api.html#defineasynccomponent
import { defineAsyncComponent, defineComponent, ref, computed } from vue

export default defineComponent({
components:{
   MyComponent:defineAsyncComponent(() => import(./DynamicComponent.vue))
},
 setup(){
const isShow = ref(false);
const name = computed (() => isShow.value ? MyComponent: )

const onClick = () => {
    isShow.value = true;
  }
 }
})


A: <template>
<div>
    <h1>O_o</h1>
    <component v-if=componentName :is=componentName/>
    <button @click=changeComponent>Click me !</button>
</div>
</template>

<script>
import {ref, reactive, computed} from vue
import First from ./First
import Second from ./Second
import Any from ./Any

export default {
name: BaseComponent,
components: {First, Second, Any}
    setup() {
        const componentName = ref (null)

        function changeComponent (){
          -> there you may use any logic to determinate another Component 
        you want !
          componentName.value = Second
       }

        return {
            componentName, changeComponent
        }
    }
}
</script>


user
The text includes fifty-one "r"s in total.
assistant