实践Vue3.0 ~~异步加载组件

Suspense

作用：他们允许我们的应用程序在等待异步组件时渲染一些后备内容,可以让我们创建一个平滑的用户体验，当异步加载完毕时在显示，它就是利用了vue3.0中新加了一个组件叫suspanse,这是一个内置的标签，不用引入直接使用就ok

 <Suspense>
      <template #default>
        <AsyncComponent/>
      </template>
      <template #fallback>
        <h1>Loading</h1>
      </template>
</Suspense>

父组件

<template>
  <div class="home">
    <Suspense>
      <template v-slot:default>
         <AsyncComp/>
      </template>
      
      <template v-slot:fallback>
         <h1>LOADING...</h1>
      </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue"
const AsyncComp = defineAsyncComponent(()=> import("../components/HelloWorld.vue"));
export default {

  setup() {
     return {}
  },

  components:{
    AsyncComp
  }
}
</script>

子组件

<template>
  <div class="hello">
    <!-- 子组件 -->
    <h2>子组件</h2>
    <p>{{msg}}</p>
  </div>
</template>

<script>
export default {
  
  setup() {
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve({
            msg:'abc'
          })
        },2000)
    })
  }
};
</script>

通过下图就可以看到在异步组件加载出来之前,显示的是fallback中的内容