Vue3 v-if 无法加载惰性组件答案

【问题标题】：Vue3 v-if cannot load lazy componentVue3 v-if 无法加载惰性组件
【发布时间】：2021-01-18 15:35:12
【问题描述】：

代码非常简单。 about 组件无法渲染。

<template>
  <div id="nav">
    <button @click="sh = !sh">{{ sh }}</button>
    <p v-if="sh">v-if</p>
    <about v-if="sh" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  components: {
    about: () => import("@/views/About.vue")
  },
  setup() {
    const sh = ref(false);
    return {
      sh
    };
  }
  // data: () => ({
  //   sh: false
  // })
});
</script>

我在 vue2 项目（JS+vue2.6.11）中尝试过，它一如既往地运行良好。

这是一个错误还是我有什么问题？谢谢。

【问题讨论】：

标签： typescript vue.js vuejs3

【解决方案1】：

是的。但是，惰性组件应该这样声明。

about: () => defineAsyncComponent(() => import("@/views/About.vue")) // wrong

<template>
  <div id="nav">
    <button @click="sh = !sh">{{ sh }}</button>
    <p v-if="sh">v-if</p>
    <about v-if="sh" />
  </div>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent } from "vue";
// lazy component can be declared here too
//const about = defineAsyncComponent(() => import("@/views/About.vue"));
export default defineComponent({
  components: {
    about: defineAsyncComponent(() => import("@/views/About.vue"))
  },
  data: () => ({ sh: false })
});
</script>

https://vuejsdevelopers.com/2020/07/13/vue-async-components-suspense/

【讨论】：

【解决方案2】：

<template>
 <div>
    <h1>O_o</h1>
    <component :is="name"/>
    <button @click="onClick">Click me !</button>
 </div>
</template>

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

export default defineComponent({
  name: 'HelloWorld',
    components: {           
      about: defineAsyncComponent(() => import("../views/About.vue")),
    },
    data: () => ({
      boardFields: [],
            sh: false
    }),
    setup () {
      const isShow = ref(false);
      const name = computed (() => isShow.value ? defineAsyncComponent(() => import("../views/AddPicture.vue")) : '')


      const onClick = () => {
          isShow.value = !isShow.value;
      }               
       
      return {          
          onClick,
          name,
          isShow
      }
  }
})
</script>

【讨论】：